Ron Ron - 5 months ago 8
CSS Question

Why are the words not vertically centered

Here is a simple HTML file with inline css:

<!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>


The large red rectangle is correct. BUT why are the words EVENTS and Sections not vertically centered? It seems quite simple and yet it doesn't look correct.

Answer

vertical-align:middle; works only when parent has display:table and children display:table-cell

Take a look:

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