                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

5-3编程挑战，增加垂直居中的问题。

有几个问题、

1、div class=“left” 中，文本怎么自动换行，后面的数字都不知道跑哪去了。

2、sub_left 中，我插入了一张图片，但是如何让这张图片显示在正中间呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局练习</title>
<style>
body{ margin:0; padding:0; font-size:20px; font-weight:bold;}
div{ text-align:center; line-height:50px;}
.top{ height:100px; background:pink;}
.head,.main{ width:900px; margin:0 auto}
.head{ height:100px; background:#09F;}
.left{ width:200px; height:600px; background:blue; float:left;}
.sub_l{ width:500px; height:600px; float:left; background:yellow;}
.sub_r{ width:200px; height:600px; float:right; background:blue;}
.foot{ height:50px; background:#000; clear:both}
.wrap{
	height:600px;
	line-height:20px;
	display:table-cell;
	vertical-align:middle;}
	
.img{
    height:600px;
	padding:0 180px;   
	/*   自己弄的土办法，一点都不标准，要是图片宽度变了，又要揣摩半天，不知各位大神有没有更好的办法   */
    display:table-cell;/*IE8以上及Chrome、Firefox*/
	vertical-align:middle;/*IE8以上及Chrome、Firefox*/    
}	
</style>
</head>

<body>
<div class="top">
	<div class="head">我是脑壳</div>
</div>
<div class="main">
	<div class="left">
    	<div class="wrap">
		<p>
    我是左边，但是我要居中了，不只中文要居中，数字也要居中，而且是垂直居中11111111111111111111111111111111111222222222222222222222231233213,但是后面这些数字去哪了，敢不敢给我来个自动换行！
		</p>
        </div>
	
	</div>
	<div class="right">
    	<div class="sub_l">我是中间
        	<div class="img">
    			<img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
			</div>
   		</div>
    	<div class="sub_r">我是右边
    	</div>
	</div>
</div>
<div class="foot" ><p style="color:white">我是脚隔</p>
</div>


</body>
</html>

Joey_Carry0n

2015-12-21

源自：如何用CSS进行网页布局 5-3

关注问题我要回答

602

操作

收起

2 回答

smart_leizi 回答被采纳 +3 积分
2015-12-21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>混合布局练习</title>

<style>

body{ margin:0; padding:0; font-size:20px; font-weight:bold;}

div{ text-align:center; line-height:50px;}

.top{ height:100px; background:pink;}

.head,.main{ width:900px; margin:0 auto}

.head{ height:100px; background:#09F;}

.left{ width:200px; height:600px; background:blue; float:left;word-break: break-all;word-wrap: break-word;}

.sub_l{ width:500px; height:600px; float:left; background:yellow;}

.sub_r{ width:200px; height:600px; float:right; background:blue;}

.foot{ height:50px; background:#000; clear:both}

.wrap{

height:600px;

line-height:20px;

display:table-cell;

vertical-align:middle;}

.img{

height:300px;

padding:85px 160px 235px 160px;

/* 自己弄的土办法，一点都不标准，要是图片宽度变了，又要揣摩半天，不知各位大神有没有更好的办法 */

display:table-cell;/*IE8以上及Chrome、Firefox*/

vertical-align:middle;/*IE8以上及Chrome、Firefox*/

}

</style>

</head>

<body>

</div>

<p>

我是左边，但是我要居中了，不只中文要居中，数字也要居中，而且是垂直居中11111111111111111111111111111111111222222222222222222222231233213,但是后面这些数字去哪了，敢不敢给我来个自动换行！

</p>

</div>

<div class="sub_l">我是中间

</div>

<div class="sub_r">我是右边

</div>

</div>

</body>

</html>

0 回复有任何疑惑可以回复我~

收起回答

烜烜
2016-01-16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局练习</title>
<style>
body{ margin:0; padding:0; font-size:20px; font-weight:bold;}
div{ text-align:center; line-height:50px;}
.top{ height:100px; background:pink;}
.head,.main{ width:900px; margin:0 auto}
.head{ height:100px; background:#09F;}
.left{ width:200px; height:600px; background:blue; float:left; word-break:break-all; word-wrap:break-word;}
.sub_l{ width:500px; height:600px; float:left; background:yellow; position: relative;}
.sub_r{ width:200px; height:600px; float:right; background:blue;}
.foot{ height:50px; background:#000; clear:both}
.wrap{
    height:600px;
    line-height:20px;
    display:table-cell;
    vertical-align:middle;
}
.img{
    position: absolute;
    top: 50%;
    left: 50%;
}
.imgrm{
    position: relative;
    right: 50%;
    bottom: 90px;
}
</style>
</head>
 
<body>
<div class="top">
    <div class="head">我是脑壳</div>
</div>
<div class="main">
    <div class="left">
        <div class="wrap">
        <p>
    我是左边，但是我要居中了，不只中文要居中，数字也要居中，而且是垂直居中11111111111111111111111111111111111222222222222222222222231233213,但是后面这些数字去哪了，敢不敢给我来个自动换行！
        </p>
        </div>
     
    </div>
    <div class="right">
        <div class="sub_l"><span>我是中间</span>
            <div class="img">
                <div class="imgrm">
                <img src="http://img1.sycdn.imooc.com//54ffac56000169c001840181.jpg" title="害羞的小女生"/>
                </div>
            </div>
         </div>
        <div class="sub_r">我是右边
        </div>
    </div>
</div>
<div class="foot" ><p style="color:white">我是脚隔</p>
</div>
 
 
</body>
</html>