position absolute實現垂直居中

2021-09-06 13:25:14 字數 802 閱讀 4133

一些圖示通常要垂直居中

如下所示:

而css中沒有直接的樣式。需要我們自己除錯。

我用了position:absolute;來實現。

要想使得position:absolute;有效,它的父元素必須也是position:absolute;否則就會以body作為參照物。

"

position:absolute;

">

if $alistdata[data].istop}-->

/images/common/top_icon.png

" height="

22px;

"class="

center-vertical-1

">

if $alistdata[data].new}-->

"position:absolute;

">

/images/new.png

" height="

22px;

"class="

center-vertical-2

">

於是我就加了span這種空元素作為其參照物。

css如下:

/*

垂直居中

*/.center-vertical-1

.center-vertical-2

這樣就實現了垂直居中了。稍微調整一下就可以了。left,top之類的。

CSS實現元素水平居中 垂直居中 水平垂直居中

1.元素水平居中 1.1行內元素水平居中 1.2塊級元素水平居中 1.2.1定寬塊級元素的水平居中 1.2.2不定寬塊級元素水平居中 2.元素垂直居中 2.1 單行文字垂直居中 2.2 多行文字垂直居中 2.3塊級元素垂直居中 3.元素水平垂直居中 像文字text 影象img 按鈕等行內元素要實現水...

css中vertical align垂直居中的認識

目標大綱 1.vertical align為何不起作用?vertical align只鍾情於 inline block內聯塊級元素 inline元素 vertical align屬性 text bottom是與父標籤的文字底部對齊 效果栗子 我是一段文字.2.如何消除下面的間隙是如何出現的?源 1 ...

div垂直居中 css div盒子上下垂直居中

div垂直居中 css div盒子上下垂直居中,讓div盒子在任何瀏覽器中任何解析度的顯示屏瀏覽器中處於水平居中和上下垂直居中。div垂直居中常用於單個盒子,如乙個頁面裡只有乙個登入布局,使用div css讓這個登入布局水平和css垂直居中。這裡介紹一種最簡單相容性最好的水平居中與上下垂直居中的方法...