Question

我的水平对齐（justify-content: center）在我的某个部分无效。当我把段落元素拿出来似乎一切正常，任何帮助将不胜感激！谢谢。

以下是代码：

<!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;
}

Answer 1

我的水平对齐（justify-content: center）在我的某个部分无效。

您的代码中有两个部分。我会解决两个问题。

在#section1中，Flex容器有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工作正常。问题是弹性项占据了容器的整个宽度，因此没有更大的空间可以居中。

要了解我的意思，请将弹性项目article）设为width: 50%：Revised Demo

Flexbox水平对齐已停止工作？

1 个答案: