当前位置:首页 > 网站维护 > 列表

CSS 大小不确定图片垂直居中

来源:浦一科技点击:时间:2018-4-2 关键词:上海网页设计
如果只是水平方向居中的话,用text-align:center;(火狐中用margin:0auto;)这个属性就可以了。但是,垂直方向的居中好像很难做到,无论是用css里的"vertical-align:middle;",还是用img的align="absmi

大小不确定图片垂直居中

如果只是水平方向居中的话,用text-align:center;(火狐中用margin:0 auto;)这个属性就可以了。但是,垂直方向的居中好像很难做到,无论是用css里的"vertical-align:middle;",还是用img的align="absmiddle",图片在垂直方向似乎都无动于衷。

发现了如下一个方法,做个收藏。

样式部分:

.middle-out{

      width: 600px;

      height: 385px;

      position: relative;

      display: table-cell;

      vertical-align: middle;

      text-align:center;

      border: 1px solid #f00;

}

.middle-in{

      position: static;

      *position:absolute;

      top:50%;

}

.middle-out .middle-in  img{

      position:static;

      *position:relative;

      top:-50%;

      left:-50%;

}

HTML部分:

<div class="middle-out">

  <div class="middle-in">

         <img src="http://www.021jz.com.cn/image/logo.jpg" />

    </div>

</div>

服务项目

网站建设

网站建设

通过SEO优化技术,提供更多的展示机会,带来大量精准流量和询盘,每月意向客户增长20%。

手机网站建设

手机网站建设

手机网站的时代强势来袭,赢在全网营销时代,手机+电脑双剑合璧,把握商机滴水不漏。

网站维护

网站维护

一个好的网站需要定期或不定期地更新内容,才能不断地吸引更多的浏览者,增加访问量。

整合网络营销

整合营销

为了建立、维护和传播品牌,以及加强客户关系,而对品牌进行计划、实施和监督的一系列营销

预约建站
免费提供网站优化
领取关键词