如何垂直对齐表格单元格中的图像和文字？ [英] How to vertically align image and text in table cell?

查看：116
本文介绍了如何垂直对齐表格单元格中的图像和文字？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图让文字位于右侧并垂直居中对齐图像。



我当前的代码： 

 < div style =display：table;> < div style =display：table-cell;>< img src =// dummyimage.com/100\"></div> < div style =display：table-cell;> text< / div>< / div>

解决方案

使用CSS3 Flexible Box Layout ：



来自文档：

< blockquote>

提供页面上的元素排列，这样当页面布局必须容纳
不同的屏幕尺寸和不同的显示设备时，
元素的行为是可预测的。对于许多
应用程序，灵活箱模型提供了对
模块模型的改进，因为它不使用浮动模块，flex
容器的边距也不会随其内容边距而崩溃。 / p>

右边居中文字的例子看起来像这样 

  #pageElement {display：flex; flex-wrap：nowrap; align-items：center}

< div id = pageElement> < DIV> < img src =http://placehold.it/350x150> < / DIV> < DIV>

此小抄对您非常有帮助和浏览器兼容性此处


I'm trying to get the text to be on the right side and vertically center aligned with the image. How can I do that?

My current code:

<div style="display: table;">
  <div style="display: table-cell;"><img src="//dummyimage.com/100"></div>
  <div style="display: table-cell;">text</div>
</div>

解决方案

use CSS3 Flexible Box Layout:

from the documentation:

providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. For many applications, the flexible box model provides an improvement over the block model in that it does not use floats, nor do the flex container's margins collapse with the margins of its contents.

your example with centered text to the right would look like this

#pageElement{display:flex; flex-wrap: nowrap; align-items: center}

<div id="pageElement">
  <div> <img src="http://placehold.it/350x150"> </div>
  <div> text </div>
</div>

I found this cheat-sheet very helpful and browser compatibility you find here

这篇关于如何垂直对齐表格单元格中的图像和文字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆