多行文字水平垂直居中在div
2015-07-16 15:43
337 查看
<BODY>
<div class="box">
<h3>1.单行文字居中</h3>
<!--设置行高来实现-->
<div class="box1">
这是高度为30像素的单行文字
</div>
<h3>2.多行文字不定高度居中</h3>
<!--运用padding来实现-->
<div class="box2">
<div>多行文字不定高度居中</div>
<div>多行文字不定高度居中</div>
<div>多行文字不定高度居中</div>
</div>
</div>
</BODY>
=============================
.box {
width: 800px;
margin: 50px auto;
border: 1px solid red;
font-size: 16px;
text-align: center;
}
.box1 {
border: 1px dashed red;
line-height: 40px;
margin: 30px;
}
.box2 {
border: 1px dashed red;
padding: 60px 0;
margin: 30px;
}
参考： http://www.cnblogs.com/siqi/archive/2013/06/16/3138289.html
<div class="box">
<h3>1.单行文字居中</h3>
<!--设置行高来实现-->
<div class="box1">
这是高度为30像素的单行文字
</div>
<h3>2.多行文字不定高度居中</h3>
<!--运用padding来实现-->
<div class="box2">
<div>多行文字不定高度居中</div>
<div>多行文字不定高度居中</div>
<div>多行文字不定高度居中</div>
</div>
</div>
</BODY>
=============================
.box {
width: 800px;
margin: 50px auto;
border: 1px solid red;
font-size: 16px;
text-align: center;
}
.box1 {
border: 1px dashed red;
line-height: 40px;
margin: 30px;
}
.box2 {
border: 1px dashed red;
padding: 60px 0;
margin: 30px;
}
参考： http://www.cnblogs.com/siqi/archive/2013/06/16/3138289.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- IOS开发之----常用函数和常数--秀清
- 金典 SQL笔记(2)
- ios微信支付（ios自学笔记）
- LeetCode 5 - Longest Palindromic Substring
- 在IT界取得成功应该知道的10件事
- cocos2d-x游戏开发(四)游戏主循环
- PX4/Pixhawk---基于NSH调试的uORB第一个应用测试
- AJAX样例及返回值json解析
- 网站制作的切图技巧
- java的简介
- host文件修改
- Android使用命令创建项目并打包安装
- cocos2d-x游戏开发(三)无限滚动地图
- provisional headers are shown 原因分析
- Elasticsearch cluster health: yellow unassigned shards
- 解递归式的方法总结
- 手机录像出现arn无响应
- Windows下查看端口占用情况及其进程信息
- win7 64位 plsql 连不上 oracle11g 解决方案
- Android--sharepreference总结