Fatal编程技术网
  • css/
  • Css 使用twitter引导沿列对齐缩略图

Css 使用twitter引导沿列对齐缩略图

css twitter-bootstrap

Css 使用twitter引导沿列对齐缩略图,css,twitter-bootstrap,Css,Twitter Bootstrap,我一直在玩推特引导来创建我的摄影页面。我在li标记中使用默认的缩略图类来创建边框并对齐它们。我有一大堆缩略图，上面有水平和垂直的图像 默认设置实际上不会创建一个漂亮的缩略图布局。通过在缩略图的CSS中添加固定高度，现在至少可以形成一个整洁的网格。但是，在缩略图块中，图像始终与顶部对齐。当堆栈中有垂直图像时，这会导致奇数形状的网格 我尝试在缩略图类中添加“垂直对齐：中间；”，但似乎不起作用。我是CSS新手，如果我遗漏了一些非常明显的东西，请原谅。不幸的是，引导缩略图并没有真正正常化为固定高度。如果

我一直在玩推特引导来创建我的摄影页面。我在li标记中使用默认的缩略图类来创建边框并对齐它们。我有一大堆缩略图，上面有水平和垂直的图像

默认设置实际上不会创建一个漂亮的缩略图布局。通过在缩略图的CSS中添加固定高度，现在至少可以形成一个整洁的网格。但是，在缩略图块中，图像始终与顶部对齐。当堆栈中有垂直图像时，这会导致奇数形状的网格

我尝试在缩略图类中添加“垂直对齐：中间；”，但似乎不起作用。我是CSS新手，如果我遗漏了一些非常明显的东西，请原谅。

不幸的是，引导缩略图并没有真正正常化为固定高度。如果要确保网格干净，需要将图像裁剪为相同大小。您也可以使用自己的CSS手动设置
li
的高度，并将
img
最大高度设置为100%，然后使用
li
上的
display:table cell
，这样您的
垂直对齐：中间
实际上可以有效地垂直居中
img

，不幸的是，引导缩略图在固定高度下无法正常化。如果要确保网格干净，需要将图像裁剪为相同大小。您也可以使用自己的CSS手动设置
li
的高度，并将
img
最大高度设置为100%，然后使用
li
上的
display:table cell
，这样您的
垂直对齐：中间
实际上可以有效地垂直居中
img