我正在尝试:
在页面上居中放置两个 div
同时保持内联
我可以完成其中一个,但另一个无法完成,因为它们的文本长度不同。如果我将 div 居中,它们就会彼此不一致(交错,如 http://willhay.io/about 所示)。我可以通过将它们向左浮动来解决这个问题,但它们不会居中。当 div 具有可变文本长度时,我如何才能使它们居中同时保持它们彼此内联?
<div class="bigBox">
<div class="aboutBox">
<img class="icon" src="../img/location.png" width="100" height="100">
<p>I was born and raised in Atlanta, GA, with dreams of moving to California. , heart, skills, art</p>
</div>
<div class="aboutBox">
<img class="icon" src="../img/music.png" width="100" height="100">
<p>
I love all types of music, and after watching Guardians of the Galaxy, I gained a new appreciation for 70's music. Follow my Spotify playlist, or listen to it here.
</p>
</div>
</div>
CSS
.aboutBox {
width:400px;
height:400px;
outline:1px solid black;
text-align:center;
color:white;
font-size:1.5em;
display:inline-block;
}
.bigBox {
text-align:center;
}
最佳答案
在 aboutBox div 上使用 vertical-align: top;
关于html - 具有可变文本长度对齐和居中问题的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30835147/