我如何在HTML / CSS的图像旁边垂直居中文本?

什么是最好的和最简单的方式垂直居中文本旁边的图像在HTML中? 需要是浏览器版本/types不可知的。 一个纯粹的HTML / CSS解决scheme。

7 Solutions collect form web for “我如何在HTML / CSS的图像旁边垂直居中文本?”

这可能会让你开始。

我总是回头看这个解决scheme 。 不是太黑客,并完成工作。

编辑:我应该指出,你可能会达到你想要的效果与下面的代码(原谅内联样式,他们应该在一个单独的表)。 似乎图像(基线)上的默认alignment将导致文本与基线alignment; 设置到中间让事情很好地呈现,至less在FireFox 3。

<div> <img src="http://stackoverflow.com/content/img/so/logo.png" style="vertical-align: middle;"/> <span style="vertical-align: middle;">Here is some text.</span> </div> 

“纯HTML / CSS”排除使用表吗? 因为他们会轻松做你想做的事情:

 <table> <tr> <td valign="top"><img src="myImage.jpg" alt="" /></td> <td valign="middle">This is my text!</td> </tr> </table> 

火焰我所有你喜欢的,但是工作(并在旧的,janky浏览器中工作)。

有以下几种方法:使用图像标签align =“absmiddle”的属性,或者将图像和文本定位到表格中的容器DIV或TD中,并使用

 style="vertical-align:middle" 

这是一个有趣的。 如果提前知道文本容器的高度,则可以使用与该高度相同的行高,并且应该垂直居中文本。

有几个选项:

  • 您可以使用行高,并确保它是包含的元素高
  • 使用display:table-cell和vertical align:middle

我喜欢的选项是第一个,如果是空格,或者是后者。

我推荐使用带有<td valign="middle">表格(正如inkedmn提到的,它适用于所有的浏览器),但是如果你使用链接进行封装,那么这里就是如何做的(也可以在丑陋的旧浏览器中使用,比如Opera 9):

 <a href="/" style="display: block; vertical-align: middle;"> <img src="/logo.png" style="vertical-align: middle;"/> <span style="vertical-align: middle;">Sample text</span> </a> 

想到的一个基本方法是将项目放在一个表格中,并有两个单元格,一个是文本,另一个是图像,标签使用style =“valign:center”。

  • JQuery:当数据参数是数组时,在Ajax请求中'Uncaught TypeError:Illegal invocation'
  • 将光标更改为手指指针
  • 如果页面已经使用UTF-8,那么向HTML表单中添加accept-charset =“UTF-8”有什么好处?
  • 我如何滚动div在ReactJS中可见?
  • 如何使用Content-disposition强制文件下载到硬盘?
  • 在整个文档中匹配某种types的第一个/第n个元素
  • 隐藏/显示HTML表格中的列
  • 2格并排alignment,如何使右格填充宽度100%?
  • 用javascriptsortinghtml列表
  • 除了最后一列以外,如何将表格单元宽度设置为最小值?
  • 如何删除CSS中的背景图像?