標籤在頁面中間的垂直對齊不起作用

-2

HTML：

<label class="label"> Should be in middle </label>

CSS：

.label{ 
    vertical-align: middle; 
}

，但它並沒有把它放在中間

來源

2014-01-17 Programming_crazy

在什麼中間？垂直對齊僅適用於多個元素。 –

您的CSS將在元素中間對齊'.label'的*內容*。請參閱[this fiddle]（http://jsfiddle.net/qk5Dq/）：文本在紅色邊界框內中間對齊。 – Jeroen

@Jeroen：我想對齊頁面中間的文字 –

在這裏你去。

WORKING DEMO

的HTML代碼：

<label class="label"> Should be in middle </label>

CSS代碼：

.label{ 
    vertical-align: middle; 
    background:#f0f0f0; 
    display:inline-block; 
    width:100%; 
    text-align:center; 
    height:150px; 
    line-height:150px; 
}

希望這是你在找什麼。

PS：高度和行高值應該相同才能正常工作。你可以把任何值，但出於說明的目的，我用150px

來源

2014-01-17 10:39:21 Nitesh

我想這是很難從眼前這個小片說的代碼。但我認爲問題是，如果你想讓標籤垂直對齊，你必須將類設置爲包含標籤的元素。像這樣的即：

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

CSS：

.label 
    { 
     vertical-align: middle; 
    }

來源

2014-01-17 10:33:17 Beejay

哦，對不起我的壞處。至於w3schools（[W3Schools]（http://www.w3schools.com/cssref/pr_pos_vertical-align.asp）），垂直對齊分配給應該對齊的元素。對於那些虛假的信息很抱歉。但你可以試試這個： [Another SO answer]（http://stackoverflow.com/questions/7142252/how-do-you-vertically-align-the-body-tag-of-an-html-document） – Beejay

這樣的

demo

CSS

div{ 
    background-color:red; 
    display: table; vertical-align: middle; 
    width:500px; 
    height:500px; 
} 
label{ 
display: table-cell; 
    vertical-align:middle; 
    text-align:center; 
}

來源

2014-01-17 10:37:05 falguni

試試這個代碼

.label{ 
text-align:center; 
margin:0px auto; 
display:block; 
width:100%; 
height:100%; 
padding:0; 
vertical-align:middle; 
}

檢查此琴

Fiddle

來源

2014-01-17 10:37:12

你的標籤是在身體only-child。身高由標籤高度進行設置，因此您嘗試將代碼設置爲單行文本中間的代碼。它做到了，工作正常。

如果你想在中間單行文本設置將更好地使用line-height CSS屬性：

<div style="height: 30px;line-height: 30px;">Some text</div>

來源

2014-01-17 10:37:18 Pinal

標籤在頁面中間的垂直對齊不起作用

回答

相關問題