问

使用CSS在锚点内垂直对齐图像

浅浅的思恋的小媳妇发布于 2023-02-09 00:38

http

bootstrap

我想垂直对齐一个锚元素内的图像,如下所示:

我看了很多帖子,但没有一个对我有用.我也使用Bootstrap缩略图类,我不知道这是否相关,这是它不起作用的原因.

我已经读过我可以设置行高,但有些不对劲.

请看一个简单的plunker.

http://plnkr.co/edit/DsQ80oEiHFn4ma4qfNW8

更新: 我更新了plunker.文本垂直对齐工作正常,但它仍然不适用于图像.

1 个回答

试试这个:

.thumbnail {
    line-height: 150px; // height taken from OPs plunker
}
.thumbnail img {
   margin: auto;
   vertical-align: middle; 
   display: inline-block;
}

添加display: inline-block;并设置line-height为父锚元素以垂直对齐中间图像.

现场例子

2023-02-09 01:18 回答

敏--MM

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签