-1
私は、約200px x 200pxという、互いに等距離の3つの四角形を含む2番目のラッパーdivを作成しようとしています。問題は、divの中央に向かって整列されていないことです。ウィンドウのサイズが変更されるたびに、四角形はウェブサイト上で静的な位置を維持します。窓の大きさに関係なく、それらを中心にしたいと思います。ラッパーdiv内のdivを中央に置くにはどうしたらよいですか？
私のコードを見てください：
/*Comment example - created 10/12/16*/
* {
font-family: 'Libre Franklin', sans-serif;
background-color: rgb(255, 255, 255);
}
.wrapper {
/*black*/
width: 960px;
min-height: 700px;
margin: 0 auto;
}
.main_content {
width: 730px;
min-height: inherit;
text-align: center;
float: left;
}
.wrapperTwo {
width: 100%;
height: 300px;
background-color: rgba(99, 99, 99, 0.7);
align: center;
}
#squareOne {
width: 200px;
height: 200px;
background-color: rgba(99, 99, 99, 0.7);
border: 1px solid rgb(223, 223, 223);
position: relative;
top: 50px;
left: 150px;
}
#squareTwo {
width: 200px;
height: 200px;
background-color: rgba(99, 99, 99, 0.7);
border: 1px solid rgb(223, 223, 223);
position: relative;
top: -155px;
left: 550px;
}
#squareThree {
width: 200px;
height: 200px;
background-color: rgba(99, 99, 99, 0.7);
border: 1px solid rgb(223, 223, 223);
position: relative;
top: -355px;
left: 960px;
}
.wrapperThree {
width: 100%;
height: 500px;
}
h2 {
position: relative;
left: 5px;
}
h5 {
position: relative;
left: 5px;
}
p {
position: relative;
left: 5px;
}<div class=banner></div>
<div class="wrapper">
<div class="main_content">
<h2></h2>
<!-- END OF H2 -->
<h5> Inc. has been a standard of web-based and cloud-based server systems since 2007.</h5>
<!-- END OF H5 -->
<p>
Our clients have trusted our team for almost a decade and throughout the years we have proven our worth over and over again.
</p>
<!-- END OF P -->
</div>
<!-- END OF MAIN_CONTENT -->
</div>
<!-- END OF wrapper -->
<div class="wrapperTwo">
<div id="squareOne"></div>
<div id="squareTwo"></div>
<div id="squareThree"></div>
</div>
<!-- END OF wrapperTwo-->
<div class="wrapperThree"></div>
ようこそスタックオーバーフロー！ポジショニングは、ウェブページをレイアウトする**非常に貧弱な方法です。これは非常に柔軟性がなく、より優れた応答性の高いオプションがあります。チェックアウト[** LearnLayout.com **]（http://learnlayout.com/） –