码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习笔记——各种居中对齐

时间:2016-01-03 18:07:06      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

0.前言
    水平居中基本方法——指定块的宽度并设定块的左右外边距为auto,上下外边距可取0,那么该块能够在父元素中水平居中。
样式例如以下:
1:margin:0px auto
2:margin-left:auto; margin-right:auto;
    垂直居中基本方法——设定块的上下内边距相等。
样式例如以下:
    padding-top:20px; padding-bottom:20px;

1.div居中对齐
【HTML】
<!DOCTYPE html>
<html>
<head>
<style>
#all{
    margin:0px auto;
    width:500px; /* 必须制定宽度 */
    height:200px;
    background-color:blue;
}
</style>
</head>
<body>
<div id="all">
<div>
</body>
</html>
【效果】
【1】body中有一个ID为all的块,该块的宽度为500px,高度为200px。通过margin:0px auto在body中水平居中。
技术分享
技术分享
图1 div居中

2.div中文字居中
【HTML】
<!DOCTYPE html>
<html>
<head>
<style>
#all{
    margin:0px auto;
    width:500px; /* 必须制定宽度 */
    height:200px;
    background-color:blue;
}
#string{
    margin:0px auto;
    width:300px;
    height:100px;
    background-color:red;
    text-align:center; /* 文字居中 */
    font-size:32px; /* 文字大小 */
    color:white; /* 文字颜色 */
}
</style>
</head>
<body>
<div id="all">
<div id="string">center<div>
<div>
</body>
</html>
【效果】
【1】body中有一个ID为all的块,该块的宽度为500px,高度为200px。在body中水平居中。
【2】在名称为all的块中有一个ID为string的块。通过margin:0px auto使得该块在父元素中水平居中。

text-align:center使得

技术分享
技术分享
图2 div 文字水平居中

3 div图片居中
【HTML】
<!DOCTYPE html>
<html>
<head>
<style>
#all{
    margin:0px auto;
    width:500px; /* 必须制定宽度 */
    height:200px;
    background-color:blue;
}
#string{
    margin:0px auto;
    width:300px; /* 必须制定宽度 */
    height:100px;
    background-color:red;
    text-align:center; /* 文字居中 */
    font-size:32px; /* 文字大小 */
    color:white; /* 文字颜色 */
}
#image{
    margin:0px auto;
    width:300px; /* 必须制定宽度 */
    background-color:white;
    text-align:center; /* 图像居中 */
    padding-top:20px; /* 图像上填充 */
    padding-bottom:20px; /* 图像下填充 */
}
</style>
</head>
<body>
<div id="all">
<div id="string">center</div>
<div id="image"><img src="loader.gif"></div>
</div>
</body>
</html>
【效果】
【1】图片在div中居中的方法和文字同样,父div中设定text-align:center就可以。
【2】假设须要图片垂直居中,那么能够设定父div的上下内边距。比如 padding-top:20px;padding-bottom:20px;
技术分享
技术分享
图3 div中图像水平居中

4.表格内容居中
【HTML】——HTML写法
<!DOCTYPE html>
<html>
<head>
<style>
#all{
    margin:0px auto;
    width:500px; /* 必须制定宽度 */
    height:200px;
    background-color:blue;
}
</style>
</head>
<body>
<div id="all">
<!-- 表格在父窗口中居中 -->
<table width="80%" align="center" border="1">
<tbody>
<!-- 单元格居中 -->
<tr height="50px"><td align="center">文字居中</td></tr>
<tr height="50px"><td align="center"><img src="loader.gif"></td></tr>
</tbody>
</table>
</div>
</body>
</html>
【效果】
【1】<table align="center" > 使得表格在父div中水平居中。
【2】<td align="center"> 使得单元格中的内容水平居中,请注意单元格中的内容默认垂直居中。
技术分享
技术分享
图4 表格内容居中——HTML写法

【HTML】CSS写法
<!DOCTYPE html>
<html>
<head>
<style>
#all{
    margin:0px auto;
    width:500px; /* 必须制定宽度 */
    height:200px;
    background-color:blue;
}
/* 设置边框 */
table, th, td{
    border: 1px solid black;
}
/* 设置table位置 */
table{
    margin:0px auto; /* 效果等同 <tabel align="center">*/
    width:80% /* 必须制定宽度 */
}
/* 单元格对齐 */
td{
    text-align:center;
}
</style>
</head>
<body>
<div id="all">
<table>
<tbody>
<tr height="50px"><td>文字居中</td></tr>
<tr height="50px"><td><img src="loader.gif"></td></tr>
</tbody>
</table>
</div>
</body>
</html>
【效果】
【1】table{margin:0px auto;},使得表格在父div中水平居中
【2】td{text-align:center;},单元格内容水平居中,请注意td{text-align:center;}和<td align="center">有同样效果。
【3】效果和如图4所看到的。

參考资料

HTML学习笔记——各种居中对齐

标签:

原文地址:http://www.cnblogs.com/lcchuguo/p/5096767.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!