为了账号安全,请及时绑定邮箱和手机立即绑定

为什么我设置了line_height却不能垂直居中?

 <div class="news">

                <div class="title"><h2 class="title_left">新闻中心</h2><a href="news.html"><span classs="title_right">More&gt;&gt;</span></a></div><!--title结束-->                 

               <div class="pic_news">

                   <img src="images/news.jpg"/>

                   <h2>520慕女神喊你来表白!</h2>

                   <p>活动时间5月20日-5月25日<br/>获奖公布时间:5月26日<br/>Learn More>></p>

                </div><!--pic_news结束-->

.news

{

width:340px;

border:1px solid #e8e8e8;

}


.course

{

width:410px;

border:1px solid #e8e8e8;

margin:0 7px;

background-color:#393CCD;

}


.sidebar

{

width:230px;

background-color:#42B57E;

}


.news,.course,.sidebar

{

height:250px;

float:left;

}


.title

{

height:35px;

border-bottom:2px solid #e8e8e8;

}


.title_left

{

width:70%;

font-family:"微软雅黑";

font-size:14px;

font-weight:bold;

color:#786f66;

float:left;

line-height:35px;

padding-left:20px;

}


.title_right

{

width:20%;

float:left;

line-height:35px;

}


正在回答

3 回答

*{margin:0;padding: 0;}
		
	.news
	{
	width:340px;
	border:1px solid #e8e8e8;
	}

	.course
	{
	width:410px;
	border:1px solid #e8e8e8;
	margin:0 7px;
	background-color:#393CCD;
	}

	.sidebar
	{
	width:230px;
	background-color:#42B57E;
	}

	.news,.course,.sidebar
	{
	height:250px;
	float:left;
	}

	.title
	{
	height:35px;
	border-bottom:2px solid #e8e8e8;
	}

	.title a{line-height: 37px;}

	.title_left
	{
	width:70%;
	font-family:"微软雅黑";
	font-size:14px;
	font-weight:bold;
	color:#786f66;
	float:left;
	line-height:35px;
	padding-left:20px;
	}

	.title_right
	{
	width:20%;
	float:left;
	}
	
	一开始把浏览器的margin和padding清除一下,然后你的title>a 标签是内联元素,给它设置ling-height
	就行了。


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

qq_一支泊_0 提问者

非常感谢!
2016-03-28 回复 有任何疑惑可以回复我~

太好了  谢谢回答 很给力

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

非常感谢!!我也是同样的问题,做在浏览器的第一个DIV总是对不齐,现在解决了

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

qq_悠悠我心_4

你好 你是怎么解决的呢 我一开始也*{margin:0 padding:0}了 但是还是那样
2016-06-25 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么我设置了line_height却不能垂直居中?

我要回答 关注问题
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号