CSS解决未知高度垂直居中_CSS/HTML-css教程-PHP中文网

CSS解决未知高度垂直居中_CSS/HTML

php中文网

发布： 2016-05-16 12:12:03

原创

1301人浏览过

尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。

标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。

非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。

复制代码代码如下:

body {padding: 0; margin: 0;} 
body,html{height: 100%;} 
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory;} 
#outer[id] {display: table; position: static;} 
#middle {position: absolute; top: 50%;} /* for explorer only*/ 
#middle[id] {display: table-cell; vertical-align: middle; position: static;} 
#inner {position: relative; top: -50%;width: 400px;margin: 0 auto;} /* for explorer only */ 
div.greenBorder {border: 1px solid green; background-color: ivory;}

xhtml

复制代码代码如下:

以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。

CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。

测试：Firefox1.5、Opera9.0、IE6.0、IE5.0通过。

function toggleContent(name,n) { 
    var i,t='',el = document.getElementById(name); 
    if (!el.origCont) el.origCont = el.innerHTML; 
     
    for (i=0;i<n;i++) t += el.origCont; 
    el.innerHTML = t; 
    }

// ]]> 
</script><div id="outer"> 
  <div id="middle"> 
    <div id="inner" class="greenBorder"> 
      <p><a href="javascript:togglecontent('inner',1)">默认长度</a>  <a href="javascript:togglecontent('inner',2)">加长页面</a></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/1201">
                            <img src="https://img.php.cn/upload/ai_manual/001/431/639/68b7a1a04e740570.png" alt="创客贴设计">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/1201">创客贴设计</a>
                            <p>创客贴设计，一款智能在线设计工具，设计不求人，AI助你零基础完成专业设计！</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="创客贴设计">
                                <span>150</span>
                            </div>
                        </div>
                        <a href="/ai/1201" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="创客贴设计">
                        </a>
                    </div>
                 
      <p> 1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充。 
 
        2.选中矩形，菜单：Effect > Distort & Transform > Zig Zag，设置如下图。 
 
        3.菜单：Effect > Stylize > Drop Shadow，设置如下图。 
 
        1.打开illustrator,新建一个文件，画个矩形，比你要导入的图片大一些，白色填充。 
 
        2.选中矩形，菜单：Effect > Distort & Transform > Zig Zag，设置如下图。 
 
        3.菜单：Effect > Stylize > Drop Shadow，设置如下图。</p> 
      <address style="text-align:center; padding: .5em; clear: left;"> 
      Design by <a href="http://www.forest53.com">Forestgan</a> 本演示采用<a href="http://www.creativecommons.cn/">创作共用授权</a>--署名和非商业用途。 
      </address> 
    </div> 
  </div> 
</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

大家都在看：

css浮动与边框边距组合问题 css grid布局自动对齐align-content应用 cssabsolute定位与transform居中技巧 css框架Bootstrap与Flexbox结合使用技巧如何通过css line-height控制行高