4-3编程练习图片文字对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
/*写出CSS样式*/
div{width:100%;background-color:#eee;text-align:center;line-height:5em;font-size:2em;display: table;}
img{vertical-align: middle;}
p{display: table-cell;vertical-align: middle;background-color: green;}
.span1{vertical-align: middle;font-size:2em;display: table-cell;}
.span2{vertical-align: middle;color:red;font-size:1em;text-decoration:underline;display: table-cell;}
</style>
</head>
<body>
<!--写出html代码-->
<div>
<img src="http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg"></img>
<p><span class="span1">CSS层叠样式表</span><span class ="span2">(Cssss Style Sheet)</span></p>
</div>
</body>
</html>
这是最开始编写不成功的代码。
我把文字都放在p标签内，加了两个span标签，所以文字整体应该是块级元素。
为了能实现上下居中对齐，在父元素div加了display：table，span里头加了display:table-cell，再分别设置vertical-align对齐。
问题来了，这时候为什么div设置的居中对齐无效了？我再把text-align:center;属性加到img和p的属性也一样？
另外，我这样编写的话，属性里有哪些代码是多余的？求解答，谢谢啦！
[object Object]=============================分割线，这一段的貌似是成功的==============================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
/*写出CSS样式*/
div{width:100%;background-color:#eee;text-align:center;line-height:5em;font-size:2em;}
img{vertical-align: middle;}
.span1{vertical-align: middle;font-size:2em;}
.span2{vertical-align: middle;color:red;font-size:1em;text-decoration:underline;}
</style>
</head>
<body>
<!--写出html代码-->
<div>
<img src="http://img1.sycdn.imooc.com/climg//59c21bae000157fa01000059.jpg"></img>
<span class="span1">CSS层叠样式表</span><span class ="span2">(Cssss Style Sheet)</span>
</div>
</body>
</html>这是第二段的，貌似是成功的。
44
收起
正在回答
6回答
关于水平居中问题，根据不同代码情况，居中情况不同：
上面代码情况，居中使用text-align:center;
使用relative、absolute 居中，如子元素和父元素宽度一样，直接使用text-align:center; ，如设置宽度，居中代码如下：
css:
div{width:100%;background-color:#eee;font-size:2em;display: relative;height:300px;}
p{display: absolute;vertical-align: middle;background-color: green; background-color: red;width:300px;left:0;right:0;margin:0 auto;}
.span1{font-size:2em;}html:
<div> <p><span class="span1">CSS层叠样式表</span></p> </div>
不同代码情况，使用不同的方案，以上两种情况。
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星