如何在不改变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/希望对您有所帮助。