没有居中的问题,麻烦老师帮忙检查下作业,顺便指点下,谢谢!

没有居中的问题,麻烦老师帮忙检查下作业,顺便指点下,谢谢!

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

<title>CSS布局</title>

<style type="text/css">

/*此处写代码*/

*{

padding: 0;

margin: 0;

}

.wenzi{

text-align: center;

font-size: 25px;

font-weight: bold;

padding-top: 20px;

padding-bottom: 10px;

}

.one{

width: 1000px;

margin: 0 auto;

}

.one .one_o{

float: left;

width: 400px;

height: 240px;

padding: 20px;

}

.one_o .dec{

font-size: 18px;

text-align: center;

}

</style>

</head>

<body>

<!-- 此处写代码 -->

<div class="one">

<div class="wenzi">ENJOY THE LIFE</div>

<div class="one_o">

<img src="http://img1.sycdn.imooc.com/climg//58f829090001a4b504260240.jpg">

<div class="dec">Life is too short.Life is too short.Life is too short.Life is too short.Life is too short.Life is too short.Life is too short.</div>

</div>

<div class="one_o">

<img src="http://img1.sycdn.imooc.com/climg//58f8290f0001558804260240.jpg">

<div class="dec">Life is too short.Life is too short.Life is too short.Life is too short.Life is too short.Life is too short.Life is too short.</div>

</div>

</div>

</body>

</html>

Ps:感谢您帮忙检查,还望多多指点,谢谢您!

正在回答

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

1回答

测试了你的代码,可以让右侧的部分右浮动,参考:

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

再添加一个样式:

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

这样就可以居中显示了。

整体的代码还是可以的,建议如果想要顶部标题垂直居中显示,直接使用行高就可以了,参考:

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

祝学习愉快~~

问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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