简单的HTML / CSS帮助。似乎无法弄清楚这一点！

Question

我正试图在左右两个图像之间排列一些文字。它为什么不向上移动？

<img src="srchere" /><span style="padding-bottom:10px;">Some text right here!</span><img src="srchere" />

这两个图像比文字大，所以看起来文字没有对齐，位置低于图像。如何提高文字？我上面的代码似乎没有移动文本。

感谢。

Answer 1

如果您希望图像与文本垂直对齐，则需要使用：

vertical-align: middle

请注意，您的padding-bottom可能会略微抛弃它。

另外，如果您还没有这样做，则应使用外部样式表而不是内联CSS。

Answer 2

如果您想手动调整，可以这样做

<span style="vertical-align:100%"> 

增加/减少百分比，直到你满足

Answer 3

HTML：

<div>
<img src="srchere" />
<span>Some text right here!</span>
<img src="srchere" />
</div>

CSS：

div {
    display:block;
}
img {
    height:30px;
    width:30px;
}
img, span {
    vertical-align:top;
    display:inline-block;
}

Answer 4

尝试将align="absmiddle"属性添加到图片中。

Answer 5

通过“向上”我假设你的意思是与容器盒的顶部对齐。这应该做你想要的：

<img style="float: left;" src="...">
<p style="float: left;">Filler text. Filler text. Filler text.</p>
<img style="float: right;" src="...">