1
私はこのレイアウトを持っていますhere。私は身体の中のすべてを中心にしようとしています。リンクされたコードで試したことに加えて、私はラップにフレックス表示プロパティを追加しようとしましたが、それもパンを外しませんでした。 justify-content: center;がトリックをやっているはずだと私は間違っていますか？フレックスボックス：センター本体の内容
もう1つ：私は<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