目录
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>