老师请问为什么实现不了图片居中?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
/*此处写代码*/
*{margin:0;padding:0;}
.page{width:100%;}
.word{width:100%;
text-align:center;
font-size:20px;
font-weight:bold;
font-family:"宋体";
padding:10px;}
.container{width:100%;
text-align:center;}
.container .left,.right{float:left;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="page">
<div class="word">ENJOY THE LIFE</div>
</div>
<div class="container">
<div class="left">
<div><img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg"></div>
<div>life is book life is book life is book life is book life is<br/> book life is book life is book life is book life is book life is<br/> book life isbook life is book life is book life is book</div>
</div>
<div class="right">
<div><img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg"></div>
<div>life is book life is book life is book life is book life is<br/> book life is book life is book life is book life is book life is<br/> book life isbook life is book life is book life is book</div>
</div>
</div>
</body>
</html>
正在回答
你好,
每个图片和文字用div块包裹,text-align:center;属性不会实现块元素居中显示,文本或者内联元素是可以居中显示的。
建议将container盒子设置固定宽度,用margin实现居中显示,一个图片左浮动,一个图片右浮动,参考:
自己可以重新测试下,祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星