我想在这里垂直对齐 div 中的一些文本: HTML:
<div class="div1">
<div class="div11">
<img src="https://pbs.twimg.com/media/BrJSq87IMAAD3Zg.png" alt="" width="40px">
</div>
<div class="div12">
<a href="">yo</a>
</br>
<a href="">yo</a>
</div>
</div>
CSS:
.div1 {
height: 40px;
}
.div1 div {
display: inline-block;
}
.div12 {
padding-top: 5px;
}
JSFiddle: http://jsfiddle.net/4mVPG/1/
我的 div 的高度是固定的,所以我想做的就是在最后一个 div (.div12) 上设置一个 padding-top 来将文本向下移动一点。然而,当我添加一个 padding-top 时,所有的盒子都会被放下。
为什么会发生这种情况,我该如何解决?谢谢
最佳答案
当您使用 inline-block
时,每个 block 的作用就好像它所在的文本在基线上对齐(默认情况下)。如果增加第二个 block 的高度,基线会下降,第一个 block 也会下降。
您可以使用 vertical-align: top
来改变它。
关于html - CSS - div 上的边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24455155/