如何垂直對齊span標籤內的東西？

1

vertical-align css屬性不會做你期望的不幸的事情。 This article解釋了2種使用css垂直對齊元素的方法。

來源

2009-04-09 00:09:05 Keltex

159

使用line-height:50px;而不是高度。這應該做的伎倆;）

來源

2009-04-09 02:10:53

+1

外觀極好！它適用於任何類型的標籤。在我的情況下，工作到。 – 2013-03-01 13:38:49

+16

問題在於文本換行時。使用兩行這個跨度將以100px高度呈現。 – 2013-04-26 13:37:36

+11

不適用於多行文字 – ProblemsOfSumit 2013-07-19 12:29:22

1

設置填充頂部是一個適當的值，推下x，然後從高度減去你有填充頂部的值。

來源

2009-04-09 09:16:43 wheresrhys

2

這對我的作品（Keltex說的一樣）

.foo { 
height: 50px; 
... 
} 
.foo span{ 
vertical-align: middle; 
} 

<span class="foo"> <span>middle!</span></span>

來源

2013-01-30 22:50:32

100

要知道，如果你有打破行span一個長句，因爲沒有足夠的空間line-height方法失敗。在這種情況下，您將有兩條線與屬性中指定的N個像素的高度有間隙。

當我想在其響應式Web應用程序的右側顯示垂直居中文本的圖像時，我陷入了困境。作爲基地，我使用了Eric Nickus和Felipe Tadeo建議的方法。

如果你想實現：

這：

.container { 
 
    background: url("https://i.imgur.com/tAlPtC4.jpg") no-repeat; 
 
    display: inline-block; 
 
    background-size: 40px 40px; /* image's size */ 
 
    height: 40px; /* image's height */ 
 
    padding-left: 50px; /* image's width plus 10 px (margin between text and image) */ 
 
} 
 

 
.container span { 
 
    height: 40px; /* image's height */ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
}

<span class="container"> 
 
    <span>This is a centered sentence next to an image</span> 
 
</span>

來源

2013-03-05 12:30:37 lluisaznar

31

這是最簡單的方法要做到這一點，如果你需要多條線路。用另一個span將span的文字包裹起來，並用line-height指定它的高度。多條線的技巧是重置內部span的line-height。

<span class="textvalignmiddle"><span>YOUR TEXT HERE</span></span>

.textvalignmiddle { 
    line-height: /*set height*/; 
} 

.textvalignmiddle > span { 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 1em; /*set line height back to normal*/ 
}

DEMO

當然外span可以是div或whathaveyou。

來源

2013-10-01 02:13:39 Hashbrown

+2

'span's，就像任何其他內聯元素一樣，[可以包含任何HTML內聯元素]（https://stackoverflow.com/questions/5545884/can-span-tags-have-any-type-of-tags-inside -them＃5545914）。無論如何，如果必要的話，我寫道'textvalignmiddle'可以是'div'（如果你不願意使用'span'，你可以將其設置爲'display：inline;'） – Hashbrown 2015-05-22 01:20:33

+0

我的意思是他們不應該'沒有。它們用於包含文本。否則使用div。 – JorgeeFG 2015-05-22 13:31:03

+2

對於html，'span'是[* generic * inline container]（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span），並且不會提示僅爲純文本; '它可以用於將元素**分組以用於樣式目的...'。我建議你閱讀規範，然後再將你的個人編碼標準推到別人身上，說他們無論如何都是事實 – Hashbrown 2015-05-23 15:25:30

4

我需要這個鏈接，因此我包裹着的一個標籤和一個div跨度，然後爲中心的跨度標籤本身

HTML

<div> 
    <a class="tester" href="#"> 
     <span>Home</span> 
    </a> 
</div>

CSS

.tester{ 
    display: inline-block; 
    width: 9em; 
    height: 3em; 
    text-align: center; 
} 
.tester>span{ 
    position: relative; 
    top: 25%; 
}

來源

2013-10-16 04:39:24 Jason

+0

感謝你們，我討厭與CSS混淆，當我在這裏遇到你的答案時，我花了整整一天的時間嘗試垂直居中。你是一個拯救生命的人！ – 2015-01-12 08:07:07

4

CSS垂直中心圖像和文字

我已經爲垂直圖像中心和文本創建了一個演示，我也測試了Firefox，Chrome，safari，Internet Explorer 9和8。

這是非常簡短的css和html，請檢查下面的代碼，你可以在screenshort上找到輸出。

HTML

<div class="frame"> 
    <img src="capabilities_icon1.png" alt="" /> 
</div>

CSS

.frame { 
     height: 160px;  
     width: 160px; 
     border: 1px solid red; 
     white-space: nowrap; 
     text-align: center; margin: 1em 0; 
    } 

    .frame::before { 
     display: inline-block; 
     height: 100%; 
     vertical-align: middle; 
     content:""; 
    } 

    img { 
     background: #3A6F9A; 
     vertical-align: middle; 
    }

輸出 enter image description here

來源

2015-12-04 11:19:13

如何垂直對齊span標籤內的東西？

回答

相關問題