我有一个关于垂直对齐问题的问题
我昨天问了一个问题
How to vertical align my images and texts
但我已经更改了代码和文本。 span 内的文本有 2 行文本,我不确定如何垂直对齐图像和文本的中间。
我已经在大部分元素上将 vertical-align
设置为 middle
但仍然不起作用
我的 jsfiddle
谁能帮我解决这个问题?谢谢!
最佳答案
这是一种方法。
对于这个 HTML:
<div class='div1'>
<span class='title'> this is the text<br>this is the second text</span>
<a class='link' href='#'>
<img class='img' src='http://placehold.it/100x50'/>
</a>
</div>
试试下面的 CSS:
.div1 {
border-color: black;
border-style: solid;
border-width: 0 1px 1px 1px;
padding: 10px;
font-size: .8em;
height: auto;
}
.title {
width: 200px;
height: auto;
vertical-align: middle;
display: inline-block;
border: 1px solid blue;
}
.img {
vertical-align: middle;
}
如果你对.title
使用display: inline-block
,你会得到更好的结果,否则,对齐将相对于第二行.title
block 。
关于html - 如何垂直对齐图像和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19040332/