如何在不改變div大小的情況下垂直對齊中間的文本

Question

我需要在左側框中將文本“ Hello world”設置為（垂直）中間。

如果我改變CSS

.red-banner .text { background: rgb(32,56,100); color: white; padding-top:8px; }

然后“ Hello world”將稍微向下移動，但黑色背景也會移動並與下面的橫幅重疊。

那么，如何在不改變黑色背景大小的情況下在框的垂直中間對齊文本呢？ （文本內容最多2行）。

 #parent { overflow: hidden; margin:0px; } .right { border-left: 2px solid; border-color: rgb(215,217,216); padding-left: 20px; float: right; width: 270px; } .left { margin: 0px; overflow: hidden; height: 100%; } body { margin:0px; font-family: Calibri; } header20 { font-size: 16pt; } #inner { margin-left: 10px; width:730px; margin: 0 auto; } .banner { position: relative; } .banner .text { position: absolute; top: 0; left: 0; width: 250px; height: 100%; display: none; } .banner:hover .text { display: block; } .red-banner .text { background: rgb(32,56,100); color: white; } .green-banner .text { background: green; } 

 <div id="parent" class="row"> <div class="right"> <br> <div class="banner red-banner"> <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'> <div class="text"> Hello world. </div> </div> <br> <div class="banner green-banner"> <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'> <div class="text"> Hello world, this is a test message for the effect. </div> </div> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> </div> <div class="left"> <div id="inner"> <br> <img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'> <p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p> <p style='margin-left:1cm'> The first line of the content</p> <p style='margin-left:1cm'> The second line of the content</p> <p style='margin-left:1cm'> The third line of the content</p> <br> </div> <table align='center'> <tr> <td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td> </tr> </table> </div> </div> 

Answer 1

選項1：使用Flexbox對齊

應用display: flex; 屬性.text ，使之成為Flexbox的容器，

• 使用justify-content將justify-content 水平對齊。
• 使用align-items 垂直對齊內容。

看看下面的代碼片段：

 #parent { overflow: hidden; margin:0px; } .right { border-left: 2px solid; border-color: rgb(215,217,216); padding-left: 20px; float: right; width: 270px; } .left { margin: 0px; overflow: hidden; height: 100%; } body { margin:0px; font-family: Calibri; } header20 { font-size: 16pt; } #inner { margin-left: 10px; width:730px; margin: 0 auto; } .row { display: flex; } .banner { position: relative; } .banner .text { position: absolute; top: 0; left: 0; width: 250px; height: 100%; display: none; } .banner:hover .text { display: flex; justify-content: center; align-items: center; } .red-banner .text { background: rgb(32,56,100); color: white; } .green-banner .text { background: green; } 

 <div id="parent" class="row"> <div class="right"> <br> <div class="banner red-banner"> <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'> <div class="text"> Hello world. </div> </div> <br> <div class="banner green-banner"> <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'> <div class="text"> Hello world, this is a test message for the effect. </div> </div> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> </div> <div class="left"> <div id="inner"> <br> <img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'> <p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p> <p style='margin-left:1cm'> The first line of the content</p> <p style='margin-left:1cm'> The second line of the content</p> <p style='margin-left:1cm'> The third line of the content</p> <br> </div> <table align='center'> <tr> <td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td> </tr> </table> </div> </div> 

選項2：使用表格和表格單元格進行對齊

您可以使用display: table 。 但是為此，您將不得不稍微更改HTML結構，例如：

<div class="text table"> <!-- display: table -->
  <div class="table-cell"> <!-- display: table-cell -->
     Hello World
  </div>
</div>

然后使用vertical-align: middle和text-align: center在.table-cell元素上.table-cell 。 看看下面的代碼片段：

 #parent { overflow: hidden; margin:0px; } .right { border-left: 2px solid; border-color: rgb(215,217,216); padding-left: 20px; float: right; width: 270px; } .left { margin: 0px; overflow: hidden; height: 100%; } body { margin:0px; font-family: Calibri; } header20 { font-size: 16pt; } #inner { margin-left: 10px; width:730px; margin: 0 auto; } .row { display: flex; } .banner { position: relative; } .banner .text { position: absolute; top: 0; left: 0; width: 250px; height: 100%; display: none; } .banner:hover .text.table { display: table; height: 50px; } .banner:hover .text.table .table-cell { display: table-cell; vertical-align: middle; text-align: center; } .red-banner .text { background: rgb(32,56,100); color: white; } .green-banner .text { background: green; } 

 <div id="parent" class="row"> <div class="right"> <br> <div class="banner red-banner"> <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'> <div class="text table"> <div class="table-cell"> Hello world. </div> </div> </div> <br> <div class="banner green-banner"> <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'> <div class="text table"> <div class="table-cell"> Hello world, this is a test message for the effect. </div> </div> </div> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> </div> <div class="left"> <div id="inner"> <br> <img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'> <p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p> <p style='margin-left:1cm'> The first line of the content</p> <p style='margin-left:1cm'> The second line of the content</p> <p style='margin-left:1cm'> The third line of the content</p> <br> </div> <table align='center'> <tr> <td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td> </tr> </table> </div> </div> 

希望這可以幫助！

Answer 2

試試下面的CSS

text-align: center;

在文本類中以對齊文本

Answer 3

垂直對齊項目Flex box是最好的主意，老方法和技巧可以完成工作，但是您的布局將需要堅實的設計和靈活的功能，因此必須使用Flex Box：首先，我們更改父項目的顯示：

diplay:flex

然后我們使用：

justify-content:center to center item horizontally ,

對於垂直對齊，我們使用：

align-item :center 

而且，因為您說過您不能使用Flex； 使用line-height還有另一種方法

.banner:hover .text
    display: block;
    text-align: center;
    line-height: 50px;

 #parent { overflow: hidden; margin:0px; } .right { border-left: 2px solid; border-color: rgb(215,217,216); padding-left: 20px; float: right; width: 270px; } .left { margin: 0px; overflow: hidden; height: 100%; } body { margin:0px; font-family: Calibri; } header20 { font-size: 16pt; } #inner { margin-left: 10px; width:730px; margin: 0 auto; } .row { display: flex; } .banner { position: relative; } .banner .text { position: flex; top: 0; left: 0; width: 250px; height: 100%; display: none; } .banner:hover .text { display: flex; } .red-banner .text { background: rgb(32,56,100); color: white; display:flex; justify-content:center; align-items:center; } .green-banner .text { background: green; } 

 <div id="parent" class="row"> <div class="right"> <br> <div class="banner red-banner"> <img src="http://dbclipart.com/wp-content/uploads/2016/03/Red-banner-clipart-image-1.png" style='width:250px;height:50px'> <div class="text"> Hello world. </div> </div> <br> <div class="banner green-banner"> <img src="http://images.clipartpanda.com/banner-20clipart-normal_1283818525.jpg" style='width:250px;height:50px'> <div class="text"> Hello world, this is a test message for the effect. </div> </div> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is a table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> <table style='width:250px;background-color:rgb(211,238,208)'> <tr> <td> <header20><span style='color:rgb(17,56,96)'><b>This is another table</b></span></header20> <ul style='padding-left:25px;margin-top:0px;magrin-bottom:0px'> <li>First point</li> <li>Second point</li> <li>Third point</li> </ul> </td> </tr> </table> <br> </div> <div class="left"> <div id="inner"> <br> <img src="smallpic.png" style='float:left;margin:0.1cm;width:85px;height:85px'> <p style='margin-left:2cm;font-size:22.0pt;margin-top:6pt;color:rgb(0,56,96)'><b>This is the title of the page - bla bla bla <br>Timetable for the next month</b></p> <p style='margin-left:1cm'> The first line of the content</p> <p style='margin-left:1cm'> The second line of the content</p> <p style='margin-left:1cm'> The third line of the content</p> <br> </div> <table align='center'> <tr> <td style='padding-right:25px'><img src="pic1.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px;padding-right:25px'><img src="pic2.png" style='width:140px;height:115px'/></td> <td style ='padding-left:25px'><img src="pic3.png" style='width:140px;height:115px'/></td> </tr> </table> </div> </div> 

Answer 4

環繞文本需要像這樣在divs中居中。 希望對您有幫助。

<div class="text">
    <div class="custom-trow">
        <div class="custom-tcell">
            Hello world.
        </div>
    </div>
</div>

並應用以下CSS規則。

.custom-trow {
    display: table;
    height: 100%;
    width: 100%;
    vertical-align: middle;
}

.custom-tcell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Answer 5

你可以試試看 http://howtocenterincss.com/希望對您有所幫助。