當(dāng)前位置:首頁(yè) > IT技術(shù) > Web編程 > 正文

CSS vertical-align不起作用
2022-05-31 17:14:53

問(wèn)題

我們有的時(shí)候想垂直居中,我們就寫上vertical-align:middle,但是大多數(shù)情況下是不起作用的,你知道是為什么嘛?

我的發(fā)現(xiàn)

vertical-align:middle這個(gè)屬性必須和line-height一起使用,就是說(shuō)它的什么top、middle、bottom這三個(gè)屬性值都是相對(duì)于line-height的,分別的含義是,行高上,行高居中,行高底。

而且還要注意的是vertical-align這個(gè)屬性是加在子元素上的,并不是加在父元素上的。而且這個(gè)子元素必須是行內(nèi)塊元素才有效。

代碼示例

css

.father{
    width: 100px;
    height: 100px;
    line-height: 100px;
    background-color: #00B5EE
}
label{
    display: inline-block;
    width: 50px;
    height: 50px;
    vertical-align: middle;
    background-color: #10375E;
}

html

<div class="father">
    <label></label>
</div>

效果:

?

label原本是行內(nèi)元素,如果你不設(shè)置display:inline-block的話是沒(méi)有用的,你可以試一試

總結(jié)

1.vertical-align必須對(duì)子元素設(shè)置,不是對(duì)父元素設(shè)置
2.必須設(shè)置line-height,不然不會(huì)起作用
3.vertical-align只對(duì)inline-block元素有效

?

轉(zhuǎn)自?https://blog.csdn.net/chengqige/article/details/118898166

?

本文摘自 :https://www.cnblogs.com/

開通會(huì)員,享受整站包年服務(wù)立即開通 >