Text disposed vertically centered in the interior of a div div
To achieve the results shown in FIG one:
html code is as follows:
<! DOCTYPE HTML>
<HTML>
<head lang = "ZH">
<Meta HTTP-equiv = "X--the UA-Compatible" Content = "IEs = Edge">
<Meta charset = "UTF-. 8" />
<title > product management background Home </ title>
<Link rel = "stylesheet" href = "./ CSS / index.css" />
</ head>
<body>
<div class = "Content">
<span> this is a to test center </ span>
<div class = "Box"> I am a div text </ div>
</ div>
</ body>
</ HTML>
Less codes corresponding
{.content
width: 500px;
height: 200px;
border: 1px Solid Red;
position: relative;
Line-height: 200px; / * Let the parent class = text content vertical centering the div * /
span {
background: Green;
}
. Box {
background: yellow;
a float: left;
width: 200px;
height: 100px;
Line-height: 100px; / * make text yellow div is centered vertically * /
text-align = left: Center; / * make the text centered horizontally * /
position: Absolute;
Top: 50%;
margin-Top: -50px;
margin-left: 200px;
}
}
② using vertical-align: middle position in the parent element is provided, and
Renderings:
html code:
<!DOCTYPE html>
<html>
<head lang="zh">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<title>商品管理后台首页</title>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<div class="content">
我是div中的文字<div class="pox">我是子元素的文字</div>
</div>
</body>
</html>
Corresponding css code:
{.content
width: 500px;
height: 200px;
Line-height: 200px; / * set its vertical center text * /
border: 1px Solid Red;
.pox {
background: Yellow;
width: 200px;
height: 70px;
the display: inline-block; / * set to be sure to div * Block-inline /
Vertical-align = left: middle; / * set the position of the element in the parent element * /
Line-height: 70px;
border: 1px Solid Green;
TEXT- align = left: Center;
}
}
After simplification core code:
{.content
width: 500px;
height: 200px;
Line-height: 200px; / * set its vertical center text * /
background: Red;
.pox {
height: 70px; / * set the height to the inner div, the only div centered vertically with * /
the display: inline-Block; / div * be sure to set-Block * inline /
vertical-align = left: middle; / * set the position of the element in the parent element * /
background: Yellow;
}
}
