文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >如何在不改变div大小的情况下垂直对齐中间的文本

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

Stack Overflow用户
提问于 2016-11-14 09:55:34
回答 5查看 1.9K关注 0票数 1

我需要将左边框中的文字"Hello“设置为(垂直)中间。

如果我更改CSS

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

然后"Hello“将被稍微向下移动，但是黑色的背景也会被移动，并且重叠下面的横幅。

​

那么，如何在不改变黑色背景大小的情况下，对齐方框中的文本呢？(文本的内容最多为2行)。

​

代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<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>

​

html
css
EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2016-11-14 10:00:42

选项1:使用Flexbox对齐

将display: flex;属性应用于.text，使其成为一个柔性箱容器，以及

  • 使用justify-content对内容进行水平对齐。
  • 使用align-items垂直对齐内容。

请看下面的片段：

​

代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<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结构，如下所示：

代码语言：javascript
复制
<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元素。请看下面的片段：

​

代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<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>

​

希望这能有所帮助！

票数 3
EN

Stack Overflow用户

发布于 2016-11-14 09:59:34

尝试在css下面

代码语言：javascript
复制
text-align: center;

在文本类中对齐文本。

票数 2
EN

Stack Overflow用户

发布于 2016-11-14 11:33:08

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

代码语言：javascript
复制
diplay:flex

然后我们使用：

代码语言：javascript
复制
justify-content:center to center item horizontally ,

对于垂直对齐，我们使用：

代码语言：javascript
复制
align-item :center

既然您说不能使用Flex，那么使用line-height还有另外一种方法

代码语言：javascript
复制
.banner:hover .text
    display: block;
    text-align: center;
    line-height: 50px;

​

代码语言：javascript
复制
#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;
}
代码语言：javascript
复制
<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
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/40585937

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档