Michael Roach

0

html

css

flexbox

鑒于以下設(shè)計(jì)元素,我試圖在html中包含圖像,以便可以使用css過(guò)渡(懸停效果)操縱不透明度.

這里的主要缺點(diǎn)是我使用手動(dòng)垂直居中(絕對(duì)/頂部:4??0%),這在縮小瀏覽器時(shí)變得明顯.

在使用絕對(duì)定位時(shí),是否可以使用flexbox或table進(jìn)行垂直居中？

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%;}

總結(jié)

以上是生活随笔為你收集整理的html以图像中心定位,在HTML图像上水平和垂直居中文本(绝对定位)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。