【问题标题】:CSS table not align images properlyCSS 表格未正确对齐图像
【发布时间】:2014-05-15 03:40:49
【问题描述】:

我正在使用 CSS 表格来创建响应式布局并水平对齐图像。当我调整屏幕大小时,所有图像都会水平调整大小。

但问题是右侧的图像永远不会自行对齐,如果你看看我的笔: http://codepen.io/vincentccw/full/IlHfj/

很明显,你仍然可以在右上角看到一条非常细的红线,更糟糕的是,如果我慢慢调整它们的大小,整个图像就会开始摇晃。

有解决办法吗?

【问题讨论】:

  • 我认为你真的不需要为这种布局使用display:table-cell;(为什么不使用浮动?)。
  • @web-tiki 我已经简化了布局,实际上布局更复杂。这很奇怪,对我来说,chrome 和 safari 只显示这个问题,但在 IE 和 firefox 中却没有.....

标签: css alignment css-tables


【解决方案1】:

您的图像没有对齐,因为即使您为单元格提供了相同的宽度,由于表格的呈现方式(以及您使用的小数位数),您的右侧单元格比左侧单元格略薄该图像略短(导致红线)

您可以将vertical-align:top 添加到您的单元格(以停止摆动)或通过删除中间列的宽度来确保左右单元格的宽度相同:http://codepen.io/anon/pen/pzrvc

【讨论】:

  • 非常感谢它的工作原理,我看到你也删除了宽度。 :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-03-12
  • 1970-01-01
  • 2017-01-18
  • 2015-09-14
  • 1970-01-01
  • 2016-05-13
  • 2019-01-17
相关资源
最近更新 更多