网页布局中的对齐

网页内容都有哪些？

文字
图片
视频
音频

页面元素有哪些？

块元素
行内元素（内联元素）
文字
图片
视频
音频

布局是什么

处理页面元素之间的位置关系。

对齐元素
处理元素的大小

我们学过几种布局

流动布局
浮动布局
定位布局
弹性布局

对齐是什么

对齐指的是

对齐元素
- 块元素
- 行内元素
- 行内块元素：< img >
对齐元素内容
- 文字
- 图片

对齐种类

image

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
*{
    margin:0;padding:0;
}
body{
    line-height: 1.5;
}
.box{
    width:600px;
    height:200px;
    background-color: yellow;
    margin:0 auto;/* 块元素水平对齐 */
}
p{
    background-color: aquamarine;
}
.box1{
    text-align: center;/* 块元素内容水平对齐 */
    margin:0 auto;/* 块元素水平对齐 */
    line-height: 200px; /*块元素内容垂直对齐(单行文本) */
}
.box2{
    height:48px;
    padding:76px 0;
}
.box2 p{
    width:50%;
    margin: 0 auto;
}
.box3{
    height:48px;
    padding-top:152px;
}
.box3 p{
    width:50%;
    margin: 0 auto;
}
.box4{
    text-align: center;
    height:40px;
    padding:80px 0;
}
img{
    /* margin:0 auto; 不可以*/
    /* vertical-align:middle; 不可以 */
    height:40px;

}

.box5 p{
    background-color:skyblue;
}
.box5 img{
    vertical-align: middle;
}
.box5 em{
    background-color: pink;
    
    
}
.box6 p{
    background-color: black;
    vertical-align: middle;
}
.box6 span{
    font-size:50px;
    background-color: aqua;
    vertical-align: middle;
}
.box6 em{
    background-color: pink;
    vertical-align: middle;
    
}
table{
    width:600px;
    margin:0 auto;
}
td{
    border:1px solid red;
    height:100px;
    text-align: center;
}
td:nth-child(1){
    vertical-align: top;
}
td:nth-child(2){
    vertical-align: middle;
}
td:nth-child(3){
    vertical-align: bottom;
}
/* 

vertical-align:
定义：①设置文本基线的对齐方式。②设置<td>的垂直对齐方式

*/
    </style>
</head>
<body>
    块元素水平居中对齐|单行文本水平居中对齐|单行文本垂直居中对齐
    <div class="box box1">
        <p>Hello World!Hello World!</p>
    </div>
    多行文本垂直居中对齐
    <div class="box box2">
        <p>Hello World!Hello World!Hello World!Hello World!Hello World!!</p>
    </div>
    多行文本底部对齐
    <div class="box box3">
        <p>Hello World!Hello World!Hello World!Hello World!Hello World!!</p>
    </div>
    图片的水平和直居中对齐
    <div class="box box4">
        <img src="./images/logo.png" alt="">
    </div>
    图片文本基线对齐方式vertical-align
    <div class="box box5">
        <p><img src="./images/logo.png" alt=""><em>Hello World</em></p>
    </div>
    文本基线对齐方式vertical-align
    <div class="box box6">
        <p><span>Hello World</span><em>Hello World</em></p>
    </div>
    td标签内容的水平和垂直对齐
    <table>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        
    </table>
</body>
</html>

网页布局中的对齐

网页内容都有哪些？

页面元素有哪些？

布局是什么

我们学过几种布局

对齐是什么

对齐种类

image

代码

推荐阅读更多精彩内容