css：使文本出現垂直居中

我想讓一些文字出現在一個元素中心，但我似乎無法讓它垂直對齊。css：使文本出現垂直居中

我創建了一個jsfiddle：http://jsfiddle.net/bz8Gn/箭頭需要更多的移動。

我試圖vertical-align:middle（和頂部）

.cont { 
    width:25px; 
    cursor:pointer; 
    border:solid 1px gray; 
    height:12px; 
    border-radius:10px; 
    text-align:center; 
} 

.arrow { 
    font-size:18px; 
} 

<div class = "cont"> 
    <span class = "arrow">&#8658</span> 
</div>

來源

2013-06-18 user984003

試試這個

.arrow { 
    display: block; 
    font-size: 18px; 
    line-height: 10px; 
}

如果你想設置垂直居中的文字，你必須設置在CSS的line-height。這隻適用於這種情況。

我試着將箭頭的line-height設置爲與.cont的高度相同，但結果並非真正對齊，所以我必須減少2個像素以使其顯示爲對齊。

演示：http://jsfiddle.net/jlratwil/49cjg/

來源

2013-06-18 07:08:30

很酷，這個工作。 – user984003

-1

vertical-align僅與塊元件的工作原理。我爲你設定高度來說明它的工作原理。

更新您的提琴http://jsfiddle.net/bz8Gn/1/

來源

2013-06-18 07:07:20

'div'已經是'block'了，你不需要設置它:) – franzlorenzon

看看這裏：相對http://jsfiddle.net/bz8Gn/5/

使用位置移動的對象5px了

CODE

.cont { 
    width:25px; 
    cursor:pointer; 
    border:solid 1px gray; 
    height:12px; 
    border-radius:10px; 
    text-align:center; 
    position: relative; 
} 
.arrow { 
    font-size:18px; 
    position: relative; 
    top: -5px; 
}

來源

2013-06-18 07:08:00 BeNdErR

Your updated Fiddle

您可以line-height

.arrow { 
    vertical-align: top; 
    font-size:18px; 
    line-height: 12px; 
}

來源

2013-06-18 07:09:47

的vertical-align屬性結合vertical-align會造成目標元素看齊，相對於其他行內元素。

爲了其他行內元素（當施加到表格單元格，在那裏它應用於內容除外）。採取這篇文章（推薦閱讀）：Understanding CSS’s vertical-align Property。

現在，解決它。你有不同的方法來做到這一點：

將容器盒等於其高度的line-height：

.cont{ 
    width:25px; 
    cursor:pointer; 
    border:solid 1px gray; 
    height:12px; 
    line-height: 12px; 
    border-radius:10px; 
    text-align:center; 
} 

.arrow{font-size:18px;}

設置div來display: table-cell並給箭頭一個vertical-align: middle：

.cont{ 
    width:25px; 
    cursor:pointer; 
    border:solid 1px gray; 
    height:12px; 
    display: table-cell; 
    border-radius:10px; 
    text-align:center; 
    /* vertical align applied to the contents */ 
    vertical-align: middle; 
} 

.arrow{ 
    font-size:18px; 
}

使用絕對定位或邊距重新定位箭頭。

順便提一下，請注意，第二個在IE7及更低版本上無效（請參閱display :table-cell does not work in ie 7?）。

來源

2013-06-18 07:13:40 franzlorenzon

css：使文本出現垂直居中

回答

相關問題