为什么标题无法居中?
来源:2-7 编程练习
慕言_7946275
2019-07-15 21:17:10
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS布局</title> <style type="text/css"> *{margin:0; padding:0; } .main{width:1000px; margin:0 auto; } .main .title{ font-family:"宋体"; font-size: 20px; font-weight: bold; padding-bottom:5px; text-align:center; } .main .left { width:426px; height:240px; float:left; padding:10px; } .main .right { width:426px; height:240px; float:left; padding:10px; } dl dd{ font-family:"宋体"; font-size:14px; font-weight:bold; } /*此处写代码*/ </style> </head> <body> <div class="main"> <div class="title">ENJOY THE LIFE</div> <div class="left"> <dl> <dd><img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg"></dd> <dd>Life is like a book,just read more and more refined,ore write more carefully. When read,mind open, all things have been indifferent toheart. Life is the precipitation.</dd> </dl> </div> <div class="right"> <dl> <dd><img src="http://climg.mukewang.com/58f8290f0001558804260240.jpg"></dd> <dd>Life is like a book,just read more and more refined, more write more carefully. When read,mind open, all things have been indifferent to heart. Life is the precipitation.</dd> </dl> </div> </div> <!-- 此处写代码 --> </body> </html>
1回答
你好同学,标题在盒子中是居中的,如下:
可能是因为下面的图片盒子没有铺满容器的宽度,右边有剩余的空间,所以让同学感觉标题没有相对图片居中。建议如下调整:
首先图片区域嵌套在一个大容器中结构更好
样式如下调整:
祝学习愉快,望采纳。
相似问题