Flexbox水平對齊已停止工作？

我的水平對齊（justify-content: center）不適用於我的某個部分。當我將段落元素取出時，一切似乎都能正常工作，任何幫助將不勝感激！謝謝。Flexbox水平對齊已停止工作？

下面是代碼：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)"> 
<meta name="dcterms.created" content="Wed, 30 Dec 2015 06:31:18 GMT"> 
<meta name="description" content=""> 
<meta name="keywords" content=""> 
<title>St Philips</title> 
<link rel="stylesheet" type="text/css" href="stphilipscss.css"> 
<link href='https://fonts.googleapis.com/css? family=Open+Sans:400,300,700,600' rel='stylesheet' type='text/css'> 
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:700' rel='stylesheet' type='text/css'> 
<!--[if IE]> 
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 

</head> 

<body> 






    <!--HEADER HEADER HEADER HEADER HEADER HEADER HEADER--> 
    <header> 

     <h4 id="textlogo">ST PHILIPS NERI</h4> 
      <nav> 
       <ul> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">Contact</a></li> 
       </ul> 
      </nav> 

    </header> 
    <!--HEADER HEADER HEADER HEADER HEADER HEADER HEADER--> 


    <!--SECTION1 SECTION1 SECTION1 SECTION1 SECTION1 SECTION1--> 
    <section id="section1"> 

     <article> 
     <h1><i>I am the way,</i> the truth, and the life.</h1> 
     </article> 
      <a href="#"><button type="button">Come in</button></a> 

    </section> 
    <!--SECTION1 SECTION1 SECTION1 SECTION1 SECTION1 SECTION1--> 

    <section id="section2"> 
    <article> 
    <h1>You're Welcome</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut  posuere dui. Praesent nisl ante, dapibus eget dolor in, imperdiet pharetra tellus. Aliquam euismod hendrerit massa, sit amet interdum risus accumsan ac. In commodo varius felis, quis feugiat tellus tempor quis.</p> 
    <p>Donec gravida mauris lacinia, pellentesque nisl nec, vestibulum tellus. Maecenas non varius ligula. Ut sit amet leo quis orci porttitor posuere eget vel ex. Fusce sit amet purus ac eros venenatis efficitur nec eu tortor. </p> 
    </article> 
    </section> 


    </body> 
    </html> 



body{ 
margin:0px; 
/*overflow:hidden;*/ 
} 


header{ 
display:flex; 
align-items:center; /* align vertical */ 
padding-top:10px; 
padding-bottom:10px; 
position:fixed; 
width:100%; 
z-index:1000; 
background-color:white; 
border-bottom-width:1px; 
border-color:#e5e5e5; 
border-bottom-style:solid; 
justify-content:space-between; 


} 



#textlogo{ 
margin:0px; 
color:#191919; 
font-family: open-sans, sans-serif;f; 
font-weight:700; 
display:inline-block; 
margin-left:100px; 
font-size:17px; 
visibility:hidden; 
} 

nav{ 
margin-right:100px; 
} 

nav li{ 
display:inline; 
padding:10px; 
} 

a{ 
color:#191919; 
list-style-type:none; 
text-decoration:none; 
font-family: 'Open Sans', sans-serif; 
font-weight:400; 
font-size:15px; 
} 



#section1{ 
height:667px; 
background-   image:url("http://i300.photobucket.com/albums/nn18/ojijimanuel/2560x1440_cobble_  stones_zpsy5twolwx.jpg"); 
background-repeat:no-repeat; 
background-size:100%; 
background-position:center; 
display:flex; 
align-items:center; 
justify-content:center; 
flex-direction:column; 

} 


#section1 article h1{ 
color:white; 
font-size:63px; 
font-family: 'open sans', serif; 
font-weight:700; 
margin-bottom:100px; 
padding-top:150px; 
margin-left:100px; 
margin-right:100px; 
} 




button{ 
background-color:transparent; 
color:white; 
border-color:white; 
border-style:solid; 
font-size:25px; 
border-width:1px; 
font-family:'Open Sans'; 
font-weight:300; 
padding-left:30px; 
padding-right:30px; 
padding-top:10px; 
padding-bottom:10px; 
cursor:pointer; 
} 

#section2{ 
height:600px; 
display:flex; 
align-items:center; 
justify-content:center; 
flex-wrap:wrap; 
} 



h1 i{ 
font-family: 'Playfair Display', serif; 
}

來源

2016-01-20 OJM

我的水平對齊（justify-content: center）不工作對我的部分之一。

代碼中有兩個部分。我會解決這兩個問題。

在#section1，柔性容器有flex-direction: column。這意味着主軸是垂直的。

justify-content屬性沿着主軸工作，所以在這種情況下，您將使用justify-content進行垂直而非水平的對齊。

對於column方向水平取向使用align-items，align-content和align-self，其沿着橫軸工作。

詳細瞭解主軸/交叉軸和撓曲取向性這裏：

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

在#section2，justify-content: center工作正常。問題是Flex項目佔據容器的整個寬度，所以沒有更大的空間來居中。

要明白我的意思，給撓性項目（article）一width: 50%：Revised Demo

來源

2016-01-20 17:59:38

我指參閱＃section2 – OJM

@OJM，我希望這個答案是顯而易見的。如果您有任何問題，請告訴我。不知道你在評論中的含義。 –

對於本網站上的答案，您會發現有用的，[考慮upvote]（http://stackoverflow.com/help/someone-answers）。沒有義務。只是提高質量內容的一種方式。 –

Flexbox水平對齊已停止工作？

回答

相關問題