目录
1.实现居中
- 1.line-height = height 文本垂直居中
- 使行元素居中：2.test-align: center :写在父级，子级内容的行元素，行块元素，文本内容水平居中
- 使块元素居中：margin: 0 auto; 写在块元素，相对于父级水平居中
- img标签会默认下方会产生间隔，当改成块元素时间隔消失 display: block；
2.图文案例
（1）.实现对块标签<p></p>的居中使用margin:
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 200px;
height: 200px;
overflow: hidden;
background-color: cadetblue;
}
p{
width: 100px;
margin: 80px auto;
background-color: gold;
/* text-align: center; */
}
</style>
</head>
<body>
<div>
<p>今天吃什么</p>
</div>
</body>
（2）. 实现对img的水平居中以及上下居中：
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 200px;
height: 200px;
/* 水平方向居中， */
text-align: center;
overflow: hidden;
background-color: cadetblue;
}
div img{
width: 100px;
/* 垂直方向居中 */
margin-top: 50px;
height: 100px;
}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" alt="">
</div>
</body>
68
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
