为什么图片底下的文字无法相对于图片居中

为什么图片底下的文字无法相对于图片居中

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">	
	<title>CSS布局</title>
	<style type="text/css">
.middel{width:800px;margin:0,auto;}
.middle-head{margin-left:400px;}
.image01{width:30%;float:left;margin-right:10px;}
.image02{width:30%;float:left;}
.text01.text02{width:100%;margin-left:150px;}
	</style>
</head>
<body>
	<div class="middle">
	    <div class="middle-head">
	        ENJOT THE LIFE
	    </div>
	    <div class="middle-image">
	      <div class="image01">
	          <img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg"/>
	          <div class="text-01">we had join we have <br>
	           we had seson in the sun
	          </div>
	      </div>
	      <div class="image02"><img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg"/>
	       <div class="text-02">
	            we had join we have <br>
	           we had seson in the sun
	        </div>
	      </div>
	    </div>
	</div>
</body>
</html>

http://img1.sycdn.imooc.com//climg/5a5eb4b200015c1609320329.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

可以呀,但是你的css中,text01和text02的类名和html中定义的不一致,其次,如果你想同时对2个选择器定义,中间要加逗号。最后因为有外边距的存在,即使文字在text01和text02内居中了,也不会和图片居中对齐的,需要你接着慢慢调试。

http://img1.sycdn.imooc.com//climg/5a5efd700001be3608320698.jpg

继续加油吧~~

  • qq_不熄_0 提问者 #1
    非常感谢!
    2018-01-17 18:39:00
怎么都被占用了呢 2018-01-17 11:47:34

text-align:center就可以了

http://img1.sycdn.imooc.com//climg/5a5ec7530001b18309330104.jpg

  • 提问者 qq_不熄_0 #1
    你好,为什么不是在text01输入 而是得在父级的image01中输入呢?
    2018-01-17 15:15:15
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师