Question

这是一个带有内联css的简单HTML文件：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <style type="text/css"> 
    body {
        margin-top: 20px;
        margin-right: 500px;
        margin-left: 500px;
    } 
    .events { 
        font-size: 200%;  
        vertical-align:middle;
        text-align:left;
        margin-left:20px;  
    } 
    .sections{ 
        font-size: 100%;  
        vertical-align:middle;
        text-align:right;
        margin-right:20px; 
    }

    #divA {
        background-color: #BB1919;
        color:white;
        height:60px;
        font-family: Arial; 
        font-weight:bold; 
        } 
    </style> 
</head> 
<body>  
    <div id="divA"><div class="events">EVENTS</div>
      <div  class="sections">Sections</div> 
    </div> 
</body>
</html>

大红色矩形是正确的。但为什么“事件”和“部分”这两个词不是垂直居中的？它看起来很简单，但它看起来并不正确。

Answer 1

vertical-align:middle;仅在父级有display:table和子级display:table-cell

时才有效

看看：

＆＃13;

		body {
			margin-top: 20px;
			margin-right: 100px;
			margin-left: 100px;
		} 
		.events { 
			font-size: 200%;  
			vertical-align:middle;
			text-align:left;
			margin-left:20px;  
            display:table-cell;
		} 
		.sections{ 
			font-size: 100%;  
			vertical-align:middle;
			text-align:right;
			margin-right:20px; 
            display:table-cell;
		}

		#divA {
			background-color: #BB1919;
			color:white;
			height:60px;
            width:100%;
			font-family: Arial; 
			font-weight:bold; 
            display:table;
			}

＆＃13;

   <!doctype html>
    <html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	</head> 
	<body>  
		<div id="divA"><div class="events">EVENTS</div>
          <div  class="sections">Sections</div> 
		</div> 
	</body>
    </html>

＆＃13;

Answer 2

以下是您的操作方法：

#divA {
  display:block;
  background: #BB1919;
  color:white;
  height:100px;
  padding:20px;
  box-sizing:border-box;
} 
.divA {
  display:table;
  width:100%;
  height:100%;
}
.events,
.sections { 
  display:table-cell;
  font-size: 20px;  
  vertical-align:middle;
  
} 

.divB {
  display:table;
  width:100%;
  height:100px;
  background:#f5f5f5;
  padding:20px;
  box-sizing:border-box;
}

<h2>If you need Outer Div</h2>
<div id="divA">
<div class="divA">  
  <div class="events">EVENTS</div>
  <div class="sections">SECTIONS</div> 
</div>  
</div> 

<h2>If you dont</h2>
<div class="divB">  
  <div class="events">EVENTS</div>
  <div class="sections">SECTIONS</div> 
</div>

Answer 3

css属性vertical-align将对齐同一行上的元素。正如您在下面的示例中所看到的，由于该属性，三个div在中间居中。但是，Vertical-align不会将文本居中放置在元素中。

在没有表的情况下实现这一点的一种方法是将行高度属性设置为容器的相同高度值。在下面的示例中，容器高60像素，文本行也是如此。如果文本仅包含在一行中，则此方法有效。

＆＃13;

div {
  display: inline-block;
  border: 1px solid black;
  vertical-align: middle;
}

.lg {
  height: 60px;
}

.sm{
  height:40px;
}

.centerTxt{
  line-height: 60px;
}

＆＃13;

<div class="sm">
Small
</div>
<div class="lg">
Large
</div>
<div class="lg centerTxt">
Large centered text
</div>

＆＃13;

为什么单词不是垂直居中的

3 个答案: