用CSS对齐我的图像

Question

当我查看我的网页时，图像未对齐。我希望图标直线对齐，但有一些区别，看起来它取决于其他单元格，具体取决于写入时间的容器有多大：

我为问题创建了fiddle。你能帮助我吗？错误的代码似乎是CSS：

#list_item_thumbs .item {
    list-style: none;
    margin: 0;
    display: block;
    clear: both;
    overflow: visible;
    border-bottom: 1px solid #ccc;
    position: relative;
    padding: 8px 0 0 0;
    height: 88px;
}

Answer 1

有两种解决方案：

一个是使用表，然后列将自动对齐。

另一个是在列上使用固定宽度，给它们类.datetime，.image和.description

并为每个应用宽度。

.datetime {
    display: block;
    width: 25%;
}

.image {
    display: block;
    width: 25%;
}

.description {
    display: block;
    width: 50%;
}

Answer 2

将此添加到您的图片中：

#list_item_thumbs .item_img img {
  display: block;
  margin: 0 auto;
}

我还会将其添加到.item_age类以进一步帮助进行对齐：

#list_item_thumbs .item_age {
  min-width: 4em;  
}

https://jsfiddle.net/8172md5g/1/