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

为什么这两个东西不能垂直居中?http://www.imooc.com/video/2513

			<div class="note">
				<div class="note_left">
					<div class="news">
						<span>新闻中心</span>
						<a href="">More>></a>
					</div>
					<div class="center">
						<div class="main">
							<img src="images/news.jpg" />
							<div class="center_news">
								<h5>520 慕女神喊你来表白!</h5>
								<p>活动时间:5月20日—5月25日<br/>获奖公布时间:5月26日</p>
								<a href="">More >></a>
							</div>
						</div>
					</div>
					<div class="note_bottom"></div>
				</div>
				<div class="note_middle">
					<div class="news"><span>课程中心</span><a href="">More >></a></div>
					<div class="center"></div>
					<div class="note_bottom"></div>
				</div>
				<div class="note_right">
					<div class="news"><span>媒体聚焦</span><a href="">More >></a></div>
					<div class="center"></div>
					<div class="note_bottom"></div>
				</div>
			</div>
.note{height: 250px;background-color: white;}
.note_left,.note_middle,.note_right{height:250px;border: 1px solid #e8e8e8;float: left;}
.note_left{width: 340px;}
.note_middle{width: 410px;margin-left: 7px;}
.note_right{width: 230px;margin-left: 7px;}
.news{height: 35px;border-bottom: 1px solid #e8e8e8;}
.news span{display: inline-block;float: left;margin-left: 20px;color: gray;line-height:35px;font-weight: bolder;}
.news a{display:inline-block;float: right;margin-right: 20px;color: gray;line-height: 35px;}
.news a:hover{color: #990000;}
.center{height: 110px;border-bottom: 1px solid #E8E8E8;}
.main{height:110px;line-height:110px;}
.center img{float: left;margin-left: 10px;vertical-align: middle;}
.center_news{line-height: 22px;float: right;margin-right: 50px;}
.center_news h5{color: #990000;}
.center_news a{color: #990000;}

http://img1.sycdn.imooc.com//574f919a0001d25d03800279.jpg

如图,感谢回答!


正在回答

2 回答

background:url(XX.jpg) no-repeat left center;

图片垂直居中方法

0 回复 有任何疑惑可以回复我~
.center img{float: left;margin-left: 10px;vertical-align: middle;}

13行,改为

.center img{float: left;margin:10px 10px;


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

飞天意大利面神兽 提问者

这是靠margin假居中,我想真正的居中。
2016-06-02 回复 有任何疑惑可以回复我~
#2

慕粉3445147 回复 飞天意大利面神兽 提问者

vertical-align只对行内元素有效,对块级元素无效.div是块级元素的吧
2016-06-02 回复 有任何疑惑可以回复我~
#3

飞天意大利面神兽 提问者 回复 慕粉3445147

img属性是inline-block
2016-06-02 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

为什么这两个东西不能垂直居中?http://www.imooc.com/video/2513

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信