line-height多行文字居中
2018-11-23 本文已影响38人
胡儒清
单行文字居中
文字只有一行的时候，我们是这样居中的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash
</div>
</body>
</html>
<style type="text/css">
.box {
border: 1px solid green;
height: 200px;
line-height: 200px;
}
</style>
效果如下：
image.png
但文字如果有多行就玩不转了
多行文字居中
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="box">
<div class="content">
Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。Web前端开发工程师，主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。
</div>
</div>
</body>
</html>
<style type="text/css">
.box {
border: 1px solid green;
height: 400px;
line-height: 400px;
}
.content {
display: inline-block;
line-height: 30px;
vertical-align: middle;
}
</style>
效果如下
image.png
