请问这里设置text-align:center；的方式是正确的吗
来源：2-9 自由编程
慕仙1405838
2021-03-09 17:45:49
<!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>小黄鸭缓动过渡案例</title>
<style>
.box {
width: 300px;
overflow: hidden;
position: relative;
}
.box img {
width: 300px;
height: 240px;
}
.box .info {
width: 280px;
height: 30px;
padding-left: 20px;
color: white;
text-align: center;
position: absolute;
line-height: 30px;
top: 226px;
background-color: rgba(0, 0, 0, .5);
transition: top 0.5s linear 0s;
}
.box:hover .info {
top: 200px;
}
</style>
</head>
<body>
<div class="box">
<img src="images/duck.png" alt="小黄鸭缓动过渡案例">
<p class="info">这是一只小黄鸭</p>
</div>
</body>
</html>
1回答
-
好帮手慕星星
2021-03-09
同学你好，问题解答如下：
1、文本居中设置方式是正确的，但是还没有实现完全居中
p标签存在左侧间距20px，需要去掉并且修改p的宽度和父盒子宽度一致。
2、默认文字部分会显示一个边，这是定位top值的问题
建议再调整一下，参考：
祝学习愉快！
0
相似问题