zoukankan      html  css  js  c++  java
  • 如何使元素垂直居中

    • 通过设置 display: table-cell ,并且设置宽高,就可以实现里面元素的垂直居中对齐。 table-cell 不能继承父级的宽高,除非父级是 table 。因为要自适应,所以宽度不能定死,于是父级定义我为 display: table 。 图片要能等比缩放, max- 100%, height: auto; 这是按宽来缩放,max-width 会导致 IE8 下图片消失,所以加上 auto9 。 IE6/7 不支持 table-cell ,可以使用 inline-block 来触发 hasLayout ,这样也能实现垂直居中对齐。

    .parent{ display: table; 100%} .parent .child{ display: table-cell; text-align: center; vertical-align: middle} .parent .child img{ max- 100%; height: auto; auto9}这是按宽等比缩放图片并且垂直居中对齐。 Parent 的高度通过 js 实时更新如果出现图片 http://img.f2e.taobao.net/img.png?x=100x390,高很高的情况下,图片将按原来尺寸撑开 table-cell 。除非给 table-cell 定死高,否则需要加入一个样式在打破 table 的盒模式。 .parent.vertical{ display: block; text-align: center;} .parent.vertical .child{ display: inline-block; *display: block; *zoom: 1} .parent.vertical .child img{ max- none; max-height: 100%; auto; } 

    • 通过设置 display: inline-block ,不设置宽高,而是在在父节点下在添加一个 b 标签来定义高度,就可以实现垂直居中。 图片要能等比缩放, max- 100%, height: auto; 这是按宽来缩放,max-width 会导致 IE8 下图片消失,所以加上 auto9 。 对于高度太高的图片则需要设置父节点的高度,否则就只需要定义 b 标签的高度。 

    <div class=“parent”><b></b><div class=“child”><img src=“”/></div></div> .parent{ display: block; 100%;} .parent .child{ display: inline-block; *display: inline; *zoom: 1; text-align: center; vertical-align: middle} .parent .child img{ max- 100%; height: auto; vertical-align:middle;} .parent b{ 1px;overflow: hidden; margin-left: -1px;vertical-align: middle; display: inline-block; *display: inline; *zoom: 1}如果是按宽等比缩放 则设置 b 的高度。如果是按高等比缩放 则设置 parent 的高度。这 2 个高度是一致的。 

  • 相关阅读:
    MySql 用户 及权限操作
    MAC 重置MySQL root 密码
    在mac系统安装Apache Tomcat的详细步骤[转]
    Maven:mirror和repository 区别
    ES6 入门系列
    转场动画CALayer (Transition)
    OC 异常处理
    Foundation 框架
    Enum枚举
    Invalid App Store Icon. The App Store Icon in the asset catalog in 'xxx.app' can’t be transparent nor contain an alpha channel.
  • 原文地址:https://www.cnblogs.com/wangtuda/p/2879430.html
Copyright © 2011-2022 走看看