HTML - 在一個框的中心的文本

-1

我想在一個數字不存在的時候在一個盒子的中心設置文本，並且當數字出現時，文本應該在頂部並且數字在底部。HTML - 在一個框的中心的文本

我能夠正確顯示數字框但沒有數字框是垂直對齊不起作用。

我是一個HTML新的蜜蜂。

有人可以幫我嗎？我看了各種文章，他們指出使用表格單元格和垂直對齊作爲中間。我也嘗試過，我認爲紅色框中間沒有文字。

下面是一個例子。

<!DOCTYPE html> 
<html> 
<head> 
<style> 

.alignleft { 
    float: left;  
} 
.alignright { 
    float: right;  
} 
.even-boxes, 
.odd-boxes { 
    height : 52px; 
    width : 430px; 
    padding-left : 20px; 
    display : table-cell; 
    vertical-align : middle; 
} 

.odd-boxes { 
    background-color:#FFCCCC; 
} 

.even-boxes { 
    background-color:#CCEBFF; 
} 

.surname-entry { 
    font-size: 25px; 
    font-family:"Verdana"; 
} 

.name-entry { 
    font-size: 18px; 
    font-family:"Verdana"; 
} 

.another-entry { 
    font-size: 14px; 
    font-family:"Verdana"; 
} 

.number-entry { 
    font-size: 32px; 
    font-family:"Verdana"; 
} 

</style> 
</head> 
<body> 

<div class="odd-boxes"> 

    <div> 
    <span class="surname-entry">ABCDEFGH<span>,</span></span> 
    <span class="name-entry">&nbsp;PQRSTU</span> 
    <span class="number-entry alignright" style="margin-right:20px">K</span>  
    </div> 
</div> 
<div class="even-boxes"> 

    <div> 
    <span class="surname-entry">ABCDEFGH<span>,</span></span> 
    <span class="name-entry">&nbsp;PQRSTU</span> 
    <span class="number-entry alignright" style="margin-right:20px">K</span> 
    <div class="another-entry">[1234567890101]</div> 
    </div> 
</div> 
</body> 
</html>

來源

2015-06-17 Ajit

請參閱此鏈接可能會有所幫助.... http://stackoverflow.com/questions/8865458/how-to-align-text- vertical-center-in-div-with-css –

-2

我誤解你了前面，再次嘗試。如果你正在嘗試垂直對齊元素

跨度元素必須移出父DIV層次

<div> 
    <span class="surname-entry">ABCDEFGH<span>,</span></span> 
    <span class="name-entry">&nbsp;PQRSTU</span> 
    <div class="another-entry">[1234567890101]</div> 
</div> 

<span class="number-entry">K</span>

你需要額外的CSS添加的，關鍵一個是顯示：inline-block的垂直調整你的內部元素

.odd-boxes, .even-boxes{ 
    position:relative; 
} 

.odd-boxes>span, .even-boxes>span{ 
    position:absolute; 
    right:20px; 
    top:0; 
    bottom:0; 
    margin:auto; 
    vertical-align:middle; 
    height:39px;/*height need to be specified*/ 
}

而且我已經修改了一些你的CSS，你可以參考下面我的版本：

http://codepen.io/vincentccw/pen/vOJVbX

來源

2015-06-17 03:40:44 Vincent1989

它會將文本居中放在框中，我不想那樣。我想要文本左對齊，除了'K' - – Ajit

它看起來不錯。謝謝文森特。不幸的是，我並不喜歡保持箱子的動態高度，因爲一列中必須有固定數量的箱子。我要創建一堆這些盒子。 :-( – Ajit

@ user3564816你可以在盒子上增加高度，它應該固定它的高度。 – Vincent1989

這裏是另一種方式來對齊文本垂直，這種解決方案會爲單行和多行文本的工作，但仍需要一個固定高度的容器：

<div> 
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> 
</div>

的CSS只是大小的<div>，然後通過將<div>的行高設置爲與其高度相等來使垂直中心對齊<span>，並使<span>成爲垂直對齊：中心的嵌入塊。然後它將行高設置回<span>，因此其內容將在塊內自然流動。

div { 
    width: 250px; 
    height: 100px; 
    line-height: 100px; 
    text-align: center; 
} 

span { 
    display: inline-block; 
    vertical-align: middle; 
    line-height: normal;  
}

演示鏈接 http://jsfiddle.net/CtH9k/

來源

2015-06-17 03:44:29

我也查看了這個鏈接，但是如果我把所有的塊放在一行中，數字也會出現在一行中，我不想那樣做。我想要的數字，如JSFiddle所示。 – Ajit

HTML - 在一個框的中心的文本

回答

相關問題