老师问个问题关于text-align;
关于text-align他对于那些元素能够起作用啊。他能使块级元素p居中显示，又不能使块级元素div居中显示。
那些元素使用它能够生效了？
9
收起
正在回答
2回答
同学你好，图片也是行内元素呢，text-align:center可以使行内或者行内块实现居中显示。
祝学习愉快~
好帮手慕粉
2020-05-17 18:04:28
同学你好，关于同学的问题回答如下：
1、text-align:center可以使文本实现居中显示，不管是块级元素还是行内元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.one {
width: 200px;
height: 200px;
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div class="one">
<div class="two">我是居中的文字</div>
<span>我是居中的文字</span>
</div>
</body>
</html>
2、父元素设置text-align:center，如果子元素是行内块或者行内元素时，会实现居中显示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.one {
width: 400px;
height: 400px;
background-color: red;
text-align: center;
}
.two {
display: inline-block;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="one">
<div class="two">我是居中的文字</div>
</div>
</body>
</html>
同学自己再写代码测试一下。
如果我的回答帮助了你，欢迎采纳。祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星