-1
我有一堆divs和文本（aboutMeDescriptionItemaboutMeDescriptionItemListList中的子div），它们需要水平居中。正如在 - 即使我减少浏览器宽度，他们需要居中。在响应式网页中水平固定高度和宽度的中间div
#secondPageContainer {
font-family: "San Francisco - Ultra Light";
font-weight: 100;
color: rgba(44, 62, 80,1.0);
display: block;
position: relative;
top: 0;
background-color: rgba(46, 204, 113,1.0);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
background-repeat: no-repeat;
background-position: center 0;
background-size: cover;
min-height: 100vh;
}
#aboutMe {
position: relative;
top: 10px;
left: 0;
right: 0;
text-align: center;
}
#aboutMeTitle {
font-size: 5em;
}
#aboutMeSubtitle {
font-size: 1.5em;
}
#aboutMeDescription {
display: block;
position: relative;
top: 50px;
}
#aboutMeDescriptionBasic {
position: relative;
margin: 25px;
padding: 25px;
border-radius: 5px;
background-color: rgba(39, 174, 96,1.0);
}
#aboutMeDescriptionBasic h3 {
font-size: 2em;
}
#aboutMeDescriptionItemListWrapper {
position: relative;
top: 20px;
min-height: 250px;
padding: 25px;
}
#aboutMeDescriptionItemList {
margin: 0 auto;
display: inline-block;
}
.aboutMeDescriptionItem {
text-align: center;
width: 200px;
height: 200px;
display: inline-block;
position: relative;
margin: 20px;
padding: 25px;
border-radius: 5px;
background-color: rgba(39, 174, 96,1.0);
}
.aboutMeDescriptionItem h3 {
font-size: 1.2em;
}<div id="secondPageContainer">
<div id="aboutMe">
<h2 id="aboutMeTitle">About Me</h2>
<h4 id="aboutMeSubtitle">Get to know me better</h4>
</div>
<div id="aboutMeDescription">
<div id="aboutMeDescriptionBasic">
<h3> Something about me... </h3>
</div>
<div id="aboutMeDescriptionItemListWrapper">
<div id="aboutMeDescriptionItemList">
<div class="aboutMeDescriptionItem">
<!--h3>bla bla.</h3-->
</div>
<div class="aboutMeDescriptionItem">
<!--h3>bla bla bla.</h3-->
</div>
<div class="aboutMeDescriptionItem">
<!--h3>Bla bla bla bla bla something really long.</h3--></div>
<div class="aboutMeDescriptionItem">
<!--h3>Bla bla bla bla bla something really even longer..</h3-->
</div>
</div>
</div>
</div>
</div>现在我面临两个问题：
留下文字评论。
aboutMeDescriptionItemList未与aboutMeDescriptionItemWrapper的中心对齐。当窗口调整为较小尺寸时，最后一个方框（aboutMeDescriptionItem）按预期方式移动到下方，但不是居中，而是浮动到左侧。如果文本未被评论，则该框的顶行（原始）与文本标题
h3对齐。由于h3内容大小不同，呈现不同来源的框。
例子：我想框对齐，如“而且，这里的HASHTAG团队”页面（第4页）。 http://hashtagposters.strikingly.com/
尝试增加文本'对齐：中心;''到＃ aboutMeDescriptionItemListWrapper'可能有帮助 - https://jsfiddle.net/e6oegoc0/ – Anonymous
哦，我的上帝。实际工作。非常感谢！ – an23lm
你能解释一下如何工作吗？即使我的文字被评论？ – an23lm