html以图像中心定位,在HTML图像上水平和垂直居中文本(绝对定位)

Michael Roach

0

html

css

flexbox

鉴于以下设计元素,我试图在html中包含图像,以便可以使用css过渡(悬停效果)操纵不透明度.

这里的主要缺点是我使用手动垂直居中(绝对/顶部:4​​0%),这在缩小浏览器时变得明显.

在使用绝对定位时,是否可以使用flexbox或table进行垂直居中？

HTML

CumberlandCounty

DauphinCounty

LancasterCounty

LebanonCounty

YorkCounty

SCSS

.badge-container {display:flex; flex-direction:row;

.badge {position:relative;}

h2 {position:absolute;

top:36%;

left:0;

right:0;

text-align:center;

strong {display:block;}

}

}

img {max-width:100%;}

总结

以上是生活随笔为你收集整理的html以图像中心定位,在HTML图像上水平和垂直居中文本(绝对定位)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。