如何在不改变div大小的情况下垂直对齐中间的文本

时间：2016-11-14 09:55:35

标签： html css

我需要制作文字＆＃34; Hello world＆＃34;在左侧框中为（垂直）中间。

如果我改变CSS

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

然后＆＃34; Hello world＆＃34;将稍微向下移动，但黑色背景也会移动并与下面的横幅重叠 hello world

那么如何在不改变黑色背景大小的情况下将文本对齐垂直中间框？ （文本内容最多2行）。

＆＃13;
＆＃13; 
#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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：3)

选项1：使用Flexbox对齐

将display: flex;属性应用于.text以使其成为弹性箱容器，并

  • 使用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＆amp; text-align: center元素上的.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>

希望这有帮助！

答案 1 :(得分：2)

尝试以下css 

text-align: center;

在文本类中对齐文本

答案 2 :(得分：2)

垂直对齐项目Flex框是最好的主意，旧技巧和黑客可以完成工作，但你的布局需要坚实的设计和灵活， 因此需要使用柔性盒： 首先，我们更改父项的显示：

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>

答案 3 :(得分：2)

将文本换行需要像这样在div中居中。希望它会对你有所帮助。

<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;
}

答案 4 :(得分：1)

你可以试试这个。 http://howtocenterincss.com/ 希望它会对你有所帮助。

相关问题
最新问题