我想创建一个垂直和水平居中的白色悬停 Headers . 在我周围,我想添加相同的填充/边距和一些填充/边距内 Headers / Headers 居中,水平和垂直 .
因为一切都是响应,我认为最好使用%来表示大多数元素 . 也许缩略图/ Headers (html)的结构需要以不同的方式编写,我现在有点卡住了 .
在示例图像中,我添加了一些红色标记,我的意思 .
Example:
<div class="col-4">
<a class="thumb" href="#">
<img src="http://fakeimg.pl/500x330/ccc/">
<div class="caption"><span>Project title centered vertical and horizontal</span></div>
</a>
</div>
3 回答
一个选项可以是在
span
元素上使用inline-block
到垂直algin,对于空格使用padding
和box-sizing
在 Headers 上 . 检查一下:DemoFiddle
检查这个fiddle .
将父级显示为表格单元格,并使用垂直对齐将所有内容居中
你也可以绝对定位 Span .
JSfiddle Demo