我有这个布局here。我试图让身体内的一切都以中心为中心。除了我在链接代码和下面的代码中尝试过之外,我还尝试向包装添加一个flex-display属性,但那也没有完成。我不完全确定我做错了什么,因为我认为justify-content: center;
应该是在做这个伎俩,对吧?Flexbox:中心正文内容
还有一件事:我有这个背景色的丑陋背景色,上面和下面是我的<main>
。我怎样才能解决这个问题,而不删除<main>
标签(这是我发现迄今为止唯一的想法)?我应该使用包装div而不是主标签吗?
html {
height: 100%;
background: #f5f5f5;
}
body {
height: 100%;
width: 70%;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
font-family: "sans-serif";
align-items: center;
-webkit-align-items: center;
}
.wrapper {
-webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
max-width: 980px;
}
header {
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
justify-content: flex-end;
-webkit-justify-content: flex-end;
align-items: center;
-webkit-align-items: center;
background: #42A8C0;
width: 100%;
color: white;
}
.name-container {
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
text-align: center;
}
.name-container h1 {
font-weight: 100;
letter-spacing: 2px;
font-size: 40px;
}
.name-container h4 {
font-weight: 500;
letter-spacing: 1px;
}
.profile-container {
flex: 0 0 auto;
-webkit-flex: 0 0 auto;
background: rgba(0, 0, 0, 0.2);
display: flex;
display: -webkit-flex;
padding: 10px;
}
.social-container {
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
font-size: 20px;
margin-top: 10px;
}
.social-container a {
color: white;
text-decoration: none;
}
.social-container a:hover {
text-decoration: underline;
}
.contact-list {
list-style-type: none;
}
.contact-list .fa {
margin-right: 10px;
font-size: 20px;
vertical-align: middle;
}
.contact-list li {
margin-bottom: 5px;
}
.portrait-pic {
border-radius: 50%;
height: 200px;
width: 200px;
}
main {
background: white;
flex: 1 0 auto;
-webkit-flex: 1 0 auto;
width: 100%;
color: black;
}
section {
padding-left: 20px;
padding-right: 20px
}
.summ-box {
margin: 20px auto;
text-align: center;
}
p {
font-weight: 200;
letter-spacing: 1px;
}
<div class="wrapper">
<header>
<div class="name-container">
<h1>My Name</h1>
<h4>Small summary of current position</h4>
</div>
<!--/name-container-->
<div class="profile-container">
<div class="social-container">
<ul class="contact-list">
<li class="email"><a href="mailto: [email protected]"><i class="fa fa-envelope" aria-hidden="true"></i></a><a href="mailto: [email protected]">[email protected]</a>
</li>
<li class="website"><a href="http://www.google.com" target="_blank"><i class="fa fa-globe" aria-hidden="true"></i></a><a href="http://www.google.com" target="_blank">portfoliosite.com</a>
</li>
<li class="linkedin"><a href="http://www.google.com" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a><a href="http://www.google.com" target="_blank">linkedin.com/inname</a>
</li>
<li class="github"><a href="http://www.google.com" target="_blank"><i class="fa fa-github" aria-hidden="true"></i></a><a href="http://www.google.com" target="_blank">github.com/username</a>
</li>
<li class="twitter"><a href="http://www.google.com" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a><a href="http://www.google.com" target="_blank">@twittername</a>
</li>
</ul>
</div>
<!--/social-container-->
<div class="picture-container">
<img src="https://cdn.pixabay.com/photo/2016/02/22/18/57/puppy-1216269_960_720.jpg" class="portrait-pic">
</div>
<!--/picture-container-->
</div>
<!--/profile-container-->
</header>
<!--/header-->
<main>
<section class="summ-box">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tria genera bonorum; Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Quae quidem vel cum periculo est quaerenda vobis; Beatum, inquit. Duo Reges: constructio interrete.</p>
<div class="line-break"></div>
<!--/line-break-->
</section>
<!--/summ-box-->
</main>
<!--/main-->
</div>
<!--/wrapper-->
我简直不敢相信那么简单,我已经在这个头上搔了几个小时了。我只是将'width'参数传递给我的包装器,它的功能正如预期的那样。 – kneijenhuijs
如果我正确地理解了关于背景颜色*的丑陋区域,请将其添加到代码中:'body {margin:0; }',它删除了[浏览器的默认样式表](https://www.w3.org/TR/CSS22/sample.html)添加的边距。 –
啊不,这不是我说的边缘(参见@AndrewMonks的回答)。虽然现在我已经注意到了,但我也会让它看起来更漂亮。谢谢! – kneijenhuijs