这个问题在这里已经有一个答案：>
How to horizontally center a <div> in another <div>?68
我知道这个问题经常被问到,但我似乎无法让它工作.你能告诉我有什么问题吗？
我知道这个问题经常被问到,但我似乎无法让它工作.你能告诉我有什么问题吗？
我有一个#container div中的三个div,我想并排中心. #container的宽度为1000px(我想保持这样).这是我的代码：
#container {
margin-top: 500px;
position: absolute;
width: 1000px;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel,serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
#right {
float: right;
}
#left {
float: left;
}
#center {
margin-left: 385px;
margin-right: 385px;
}
<div id="container">
<h2>Here's what you'll do!</h2>
<div id="left">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
所有的帮助将很乐意赞赏.
解决方法
你可以使用flexBox做得很简单：
#container {
/* margin-top: 500px; */
width: 1000px;
margin: 0 auto;
}
.related-article {
background-color: #D6A400;
display: inline-block;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel,serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
}
#container {
width: 1000px;
}
.related-article {
background-color: #D6A400;
display: inline-block;
width: 230px;
height: 300px;
border-radius: 30px;
margin-bottom: 0px;
}
.related-article > img {
width: 200px;
height: 150px;
border-radius: 15px;
margin-top: 15px;
}
.related-article > h3 {
font-size: 15px;
width: 180px;
text-align: justify;
margin-left: auto;
margin-right: auto;
color: #f1f1f1;
font-family: Abel,serif;
margin-bottom: none;
}
a {
text-decoration: none;
}
.Box {
margin-right: 10px;
width: 230px;
height: 300px;
}
.flex-container {
display: flex;
align-items: center;
justify-content: center;
}
<div id="container">
<h2>Here's what you'll do!</h2>
<div class="flex-container">
<div id="left" class="Box">
<a href="#" class="related-article first" align="middle">
<img src="download.jpeg" alt="T-rex">
<h3>Constructing amazing fossils you never even dreamed of</h3>
</a>
</div>
<div id="center" class="Box">
<a href="#" class="related-article second" align="middle">
<img src="fossil-fish-10-lg.jpg" alt="Fish">
<h3>Studying ancient marine biology</h3>
</a>
</div>
<div id="right" class="Box">
<a href="#" class="related-article third" align="middle">
<img src="fossil.turtle2.jpg" alt="Turtle">
<h3>Uncovering the world's greatest mysteries</h3>
</a>
</div>
</div>
</div>
