4-3编程练习图片文字对齐
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!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] |
1 | =============================分割线，这一段的貌似是成功的============================================== |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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:
1 2 3 | 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:
1 2 3 | <div> <p><span class="span1">CSS层叠样式表</span></p> </div> |
不同代码情况，使用不同的方案，以上两种情况。
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧