欢迎访问 生活随笔!

生活随笔

当前位置: 首页 > 前端技术 > HTML >内容正文

HTML

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

发布时间:2023/12/10 HTML 50 豆豆
生活随笔 收集整理的这篇文章主要介绍了 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图像上水平和垂直居中文本(绝对定位)的全部内容,希望文章能够帮你解决所遇到的问题。

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