我如何垂直居中文本與css

我試圖找到垂直居中文本，但我找不到滿意的答案。我發現的最好的答案是this。這使得它看起來像允許我垂直居中文本，但是如果我使用它並添加更多文本，它只會擴展到底部，而不是重新居中，如水平發生的情況。我如何垂直居中文本與css

請注意，我正在尋找一個CSS唯一的解決方案，所以沒有JavaScript請。請注意，我希望能夠添加多行文字。

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<style type="text/css"> 
    div#maindiv { 
     width: 810px; 
     height: 99px; 
     background-color: black; 
     margin: 0px; 
     padding: 0px; 
     color: white; 
     font-family: Sans-serif; 
     text-align: center; 
     display: table; 
    } 
    div#maindiv span { 
     font-size: 1.1em; 
    } 


    div#part1 { 
     width: 270px; 
     height: 99px; 
     background-color: #6DCAF2; 
     float: left; 
     vertical-align: middle; 
     position: relative; 
    } 

    div#horizon1 { 
     background-color: green; 
     height: 1px; 
     left: 0; 
     overflow: visible; 
     position: absolute; 
     text-align: center; 
     top: 50%; 
     visibility: visible; 
     width: 100%; 
    } 

    div#content1 { 
     background-color:green; 
     height:99px; 
     width: 270px; 
     position: absolute; 
     top: -50px; 
    } 

</style> 
<title>XHTML-Strict</title> 
</head> 
<div id="maindiv"> 
<body> 
    <div id="part1"> 
     <div id="horizon1"> 
      <div id="content1"> 
       <div id="bodytext1"> 
        <span> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dolor augue, faucibus quis sagittis 
        <span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

最後，我想要有3個塊，每個塊都將文本居中放在中間。這些文本由客戶編輯，因此它們必須能夠跨越多行。目前，文本從文本框的頂部開始到底部，最後，我希望文本從某個點開始，以便文本正文的中心位於文本框的中心。

我的最終解決方案注意：如果您在同一個div中有float：left，則vertical-align不起作用。

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<style type="text/css"> 
    div#maindiv { 
     width: 810px; 
     height: 99px; 
     background-color: black; 
     margin: 0px; 
     padding: 0px; 
     color: white; 
     font-family: Sans-serif; 
    } 
    div#maindiv span { 
     font-size: 1.1em; 
    } 

    div.part { 
     width: 262px; 
     height: 99px; 
     padding: 0px; 
     margin: 0px; 
     padding: 4px; 
     border: 0px; 
     color: white; 
     text-align: center; 
     display: table-cell; 
     vertical-align: middle; 
    } 

    div.bgc1 { 
     background-color: #6DCAF2; 
    } 

    div.bgc2 { 
     background-color: #2A4B9A; 
    } 

    div.bgc3 { 
     background-color: #FF8A00; 
    } 


</style> 
<title>XHTML-Strict</title> 
</head> 
<div id="maindiv"> 
<body> 
    <div style="float: left;"> 
     <div class="part bgc1"> 
      <span> 
       Vegeta! What does the scouter say about his power level?! 
      </span> 
     </div> 
    </div> 
    <div style="float:left;"> 
     <div class="part bgc2"> 
      <span> 
       It's over NINE THOUSAAAAAAAAAND! 
      </span> 
     </div> 
    </div> 
    <div style="float:left;"> 
     <div class="part bgc3"> 
      <span> 
       What NINE THOUSAND? There is no way that can be right! 
      </span> 
     </div> 
    </div> 
</div> 
</body> 
</html>

來源

2012-01-03 NomenNescio

您可以發佈您當前的代碼？第一個問題總是：'你希望中心的文字在哪裏？' – ptriek 2012-01-03 15:18:45

有多種方法可供使用：http://www.vanseodesign.com/css/vertical-centering/如果您可以分享您使用的代碼，也許我們可以幫助您制定特定的解決方案。 – 2012-01-03 15:19:27

其他的css方式是將文本放在表格單元格中;否則你將不得不使用js – mreq 2012-01-03 15:19:44

您可以將您的容器設置爲display:table-cell並添加vertical-align:middle：

http://jsfiddle.net/ptriek/h5j7B/1

（但IE7及以下不會喜歡這個......）

來源

2012-01-03 15:29:36 ptriek

除了IE8之前的問題，這在手機和手持設備上也不能很好地工作。（除了Safari瀏覽器的受害者，就是這樣）。另外，它並不真正將文本居中，它將v中心放在容器中，然後又包含文本......但是誰想要在這裏開始計算豌豆？ ;）無論如何，好主意...... – 2012-01-03 15:38:48

您可以使用與其父容器相同的行高。

例如

<div style="height:32px;> 
    <p style="line-height:32px;">Text</p> 
</div>

你會希望這些在外部的CSS表。

如果我正確理解你的問題。

來源

2012-01-03 15:18:52

你想解釋倒票嗎？如果我解釋錯了什麼，請毫不猶豫地糾正。 – 2012-01-03 15:33:14

我沒有downvote，但OP提到添加更多（閱讀：多行）文本時發生的問題 - 並且不會與您的答案一起工作... – ptriek 2012-01-03 15:35:39

感謝您的答覆。 – 2012-01-03 15:54:47

<div style="height:50px;line-height:50px;"> 
    Text 
</div>

來源

2012-01-03 15:20:52 Arrabi

您需要將HTML標記爲代碼，否則它將不會顯示在您的SO答案中。 – scottheckel 2012-01-03 15:22:43

我同意的一個有效答案，但是有一個問題：當文本開始水平纏繞時，這將會「突破」成爲一種醜陋的東西，並且具有誇張的線條高度。 OP應該讓我們知道：「我們正在談論多少文本」。 ;） – 2012-01-03 15:32:08

通常我用這個按鈕和div與一行文本。 – Arrabi 2012-01-04 07:52:09

那麼，有幾種解決方案。

最簡單的是

#centerme 
{ 
    // will center the text vertically, but looks bad with multiliners 
    line-height:20em; 
}

對於多套，你需要放置一箱，在一箱

#parentbox 
{ 
    // we need the "parent" to have some kind of height 
    height:20em; 

    // the most important... position children "relative" to the parent 
    position:relative; 
} 

.childbox 
{ 
    position:absolute; 
    left:0; 
    top:50%; 
    margin-top:-5em; // this pulls the child back "up" to the vertical center 
}

這裏的問題是，的「高度」你的多線程必須是已知的（或至少是猜測的），所以它實際上是垂直的。

你需要什麼TO KNOW

沒有純CSS的方式來了解一個元素的高度，那麼這將允許我們在「自適應」的方式垂直居中了！

這意味着當您更改文本時，您必須更改CSS以確保它們仍然適合。

這可能很煩人，這就是爲什麼大多數人會回頭使用JavaScript來解決這種CSS「煩惱功能」的煩惱。最後，JavaScript讓我們更容易（至少在這種情況下）。

有一個關於這個打算在這網頁並圍繞這個網站很多Q & A的。如果你錯過了他們，這裏有一些：

有還有更多;所有提供個別解決方案的個案。這些可以幫助你更有信心（正如你最初所說的那樣，你是這種CSS的新手）。

來源

2012-01-03 15:22:45

我如何垂直居中文本與css

回答

相關問題