Div中单行文字图片垂直居中

最新推荐文章于 2024-10-24 09:44:39 发布

iteye_19696

最新推荐文章于 2024-10-24 09:44:39 发布

阅读量139

点赞数

文章标签： .net IE Firefox CSS 浏览器

本文链接：https://blog.csdn.net/iteye_19696/article/details/81727946

版权

Div中单行文字图片垂直居中，多行垂直居中可以参考http://zhouyao.iteye.com/blog/417432

文字在层中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!
<div style="line-height:500px;height:500;">
要垂直居中的文字</div>

但line-height不能使文字和图片同时居中。

以下实现文字图片同时居中：

css

.bodytoptitler{
float:right;
width:180px;
height: 25px;
text-align:left;
line-height: 25px;
overflow: hidden;
font-size:12px;
}

.titlemiddle{
position: relative;
display: table-cell;
vertical-align: middle;
}

.titlemiddle div{
position: static !important;
position: absolute;
top: 50%;
}

.titlemiddle div div{
position: relative;
top: -50%;
}

.titlemiddle div div img{
vertical-align:middle;
}

html

参考一下内容：

1、参考一

div+css实现Firefox和IE6兼容的垂直居中
Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而IE6中则需要借助IE6中css的特点实现垂直居中。为了实现Firefox和IE6兼容的垂直居中，还需要借助于!important标记。Firefox支持!important标记，而IE6忽略!important标记，因此可以使用! important标记区别Firefox和IE6。

[示例代码]
<html>
    <body>
        <div style="display: table-cell; vertical-align: middle; height: 200px; border: 1px solid red;">
            <p>垂直居中，Firefox only</p>
            <p>垂直居中，Firefox only</p>
            <p>垂直居中，Firefox only</p>
        </div>
        <div style="border: 1px solid red; height: 200px; position: relative;">
             <div style="position: absolute; top: 50%;">
                 <div style="position: relative; top: -50%;">
                     <p>垂直居中，IE6 only</p>
                     <p>垂直居中，IE6 only</p>
                     <p>垂直居中，IE6 only</p>
                 </div>
             </div>
        </div>
        <div style="border: 1px solid red; height: 200px; position: relative; display: table-cell; vertical-align: middle;">
             <div style="position: static !important; position: absolute; top: 50%;">
                 <div style="position: relative; top: -50%;">
                     <p>垂直居中，Firefox IE6 only</p>
                     <p>垂直居中，Firefox IE6 only</p>
                     <p>垂直居中，Firefox IE6 only</p>
                 </div>
             </div>
        </div>
    </body>
</html>
[div+css关键词]
div css

[div+css重要工具]
Internet Explorer Developer Toolbar, http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

[div+css的浏览器兼容问题]
水平居中，Firefox使用margin-left: auto; margin-right: auto; IE6 使用text-align: center;
垂直居中，Firefox中使用display: table-cell; vertical-align: middle;可以实现div垂直居中，而IE6中则需要借助IE6中css的特点实现垂直居中。
!important标记，Firefox支持!important标记，IE6忽略!important标记

2、参考二

之前看到很多人一直都问这个问题，不过当时我没当一回事，因为在 CSS 中要垂直居中，多数是在有高度的情况下，或者容器高度不定的情况下才用，看上去比较舒服，而且实现的方法也不少，不一定要拘泥于和 table 布局一样。不过最近有人问了几个例子，看来对此的需求还不少。现在就把我经验拿出来分享一下，希望大家鼓鼓掌。聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
首先，要有一个概念：凡是 table 布局可以实现的，CSS 一定可以实现。CSS 可以实现的，table 未必能做到。聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
现在来几个例子：聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
一、单行内容的居中聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置 line-height 和 height，并使两值相等，再加上 over-flow: hidden 就可以了聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
.middle-demo-1{聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
height: 4em;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
line-height: 4em;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
overflow: hidden;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
} 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
优点：聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
1. 同时支持块级和内联极元素聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
2. 支持所有浏览器聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
缺点：聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
1. 只能显示一行聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
2. IE中不支持<img>等的居中聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
要注意的是：聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
1. 使用相对高度定义你的 height 和 line-height聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
2. 不想毁了你的布局的话，overflow: hidden 一定要聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
为什么？聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
请比较以下两个例子：聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
<p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height:24px; width:370px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <br/> <br/> <p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行] 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
上一个高度是用的绝对单位px，并且没有隐藏溢出，下一个高度用的单位是相对单位em，并且隐藏了溢出。如果你的浏览器支持放大字体，那么尽情地放大字体，看看会出现什么效果。聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
二、多行内容居中，且容器高度可变聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
也很简单，给出一致的 padding-bottom 和 padding-top 就行聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
.middle-demo-2{聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
padding-top: 24px;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
padding-bottom: 24px;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
} 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
优点：聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
1. 同时支持块级和内联极元素聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
2. 支持非文本内容聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
3. 支持所有浏览器聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
缺点：聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
容器不能固定高度聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
三、把容器当作表格单元聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
CSS 提供一系列diplay属性值，包括 display: table, display: table-row, display: table-cell 等，能把元素当作表格单元来显示。这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
.middle-demo-3{聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
display: table-cell;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
height: 300px;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
vertical-align: middle;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
} 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
可惜IE不支持这些属性，不过在其他浏览器上显示效果非常完美。聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
要注意的是：和一个合法的<td>元素必须在<table>里一样，display: table-cell 元素必须作为 display: table 的元素的子孙出现。聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
优点：聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
不用说了吧，就是表格，效果和表格一模一样聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
缺点：聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
IE下无效聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
四、以毒攻毒！用 IE 的 bug 解决 IE 中的绝对居中聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
先不得不说一句，IE 真的是个很烂的浏览器，CSS1中的定义都不支持，害得要我们转个大圈子来造居中。不过就像我说的，凡是 table 布局可以实现的，CSS 一定可以实现，即使在 IE 里也不例外。我研究 IE layout 模式多年，还是找出了一个可以在 IE 中绝对居中的方法。这个方法就是基于 IE layout 的 bug，也可以算以毒攻毒。至于原理，不要问我，这是独门秘学，何况三言两语也讲不清楚，只要好用就行聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
.middle-demo-4{聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
height: 300px;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
position: relative;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
}聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
.middle-demo-4 div{聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
position: absolute;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
top: 50%;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
left: 0;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
}聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
.middle-demo-4 div div{聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
position: relative;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
top: -50%;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
left: 0;聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
} 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
五、整合三和四，写出支持所有浏览器的垂直居中容器！聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
思路是利用 IE 和非IE 浏览器的 CSS hack, 整合三和四的CSS，写出兼容主流浏览器的垂直居中容器。具体代码就不给出了，大家权当作练习练习。例子可以在下面的附录中找到。聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
最终实测支持的浏览器：IE6+, Mozilla 1.7, Netscape Navigator 8, Opera 8.0+, Firefox 1.0+ 和 Safari 1.0+IE5 下需要加上对合适模型的补正。聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
推测支持的浏览器：Mozilla 1.5+, Netscape Navigator 7+, Opera 7+聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
未测试浏览器：Konqueror聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
最后附上自己写的，所有居中布局的范例网页，大家不明白可以参考。聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
 聊城信息港 {本文来自:聊城门户网www.Lc365.net} 聊城房地产网
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Demo:: vertical align: middle</title> <meta lang="en" name="author" content="Spenser Lee" /> <meta lang="en" name="copyright" content="(c)2006 Liberty Studio" /> <style media="screen" type="text/css"> html,body,div,h1,h2,pre,dd,ol{margin: 0;padding: 0;border: 0} html{min-width: 779px} body{background: #fff;color: #596480;text-align: center} div#main-wrapper{padding: 12px 5px;width: 769px;margin: 0 auto} div,code,p,h1,h2,address,dt,dd,li{font: normal 12px/1.5em Tahoma,"Lucida Grande",Helvetica,Verdana,Lucida,Arial,"Arial Unicode",sans-serif,serif} h1{font-size: 22px;font-weight: bold;border-left: 12px solid #324f96;background: #e0eaf4;color: #4868a9;height: 4em;line-height: 4em;padding: 0 12px;overflow: hidden; text-align: left} h2{font-size: 12px;font-weight: bold;background: #c0014e;color: #fff;height: 2.5em;line-height: 2.5em;padding: 0 24px;overflow: hidden;margin: 12px 0;text-align: left} h2 a{color: #fff;background: transparent} h2 a:hover{text-decoration: none} p{margin: 6px 0;padding: 0 12px 0 24px;text-indent: 2em;text-align: left} p.snap-back{text-align: right} code{display: block;font-family: "Courier New", Courier, monospace, mono, serif;margin: 12px auto;padding: 12px;border: 1px solid #596480;color: inherit;background: #f6f6f6;text-align: left;white-space: pre;width: 350px} strong{font-weight: bold} em{font-style: italic} address{display: block;padding: 0 12px;margin: 12px 0;text-align: right} dl{margin: 6px 0;padding: 0 12px 0 24px;text-align: left} dt{margin: 0;text-indent: 2em;font-weight: bold} dd{margin-left: 24px;text-indent: 2em} li{list-style: square inside none;text-align: left} ol#table-of-content{padding-left: 24px} a{color: #c0014e;background: transparent;text-decoration: none} a:hover{text-decoration: underline} div.demo{width: 400px;margin: 12px auto;border: 1px solid #596480;color: inherit;background: #ffc} div.demo p{text-align: left;margin: 24px;text-indent: 0} p#demo-1{margin: 12px auto;padding: 0 12px;width: 400px;text-indent: 0;border: 1px solid #596480;color: inherit;background: #ffc;line-height: 4em;height: 4em;overflow: hidden} div#demo-2{padding: 50px 0} div#demo-4, div#demo-5{height: 300px;position: relative} div#demo-4 div, div#demo-5 div{position: absolute;top: 50%;left: 0} div#demo-4 p, div#demo-5 p{position: relative;top: -50%} div#demo-3{display: table;height: 300px;border-collapse: collapse} div#main-wrapper>div#demo-5{position: static;display:table} div#main-wrapper>div#demo-5>div{display:table-cell;vertical-align:middle;position:static} div#demo-3>div{display: table-row} div#demo-3>div>div{display: table-cell;vertical-align: middle} span.property{font-family: "Courier New", Courier, monospace, mono, serif;border-bottom: 1px dotted #596480;background: #ffc;color: #c0014e} p.copyright{line-height: 3em;text-align: center;border-top: 1px dotted #596480} </style> </head> <body> <div id="main-wrapper"> <h1>Demo of middled vertical align</h1> <address> Author: Spenser Lee, Liberty Studio<br /> Originally posted on <a href="http://www.blueidea.com/bbs/" title="BlueIdea Forum">BlueIdea Forum</a> </address> <h2><a id="bullet-0">Table of centents:</a></h2> <ol id="table-of-content"> <li><a href="#bullet-1" title="Single line countainer with/without a fixed height">Single line countainer with/without a fixed height</a></li> <li><a href="#bullet-2" title="Align multi-line container which does not have a fixed height">Align multi-line container which does not have a fixed height</a></li> <li><a href="#bullet-3" title="Simulating table layout in container with a fixed height">Simulating table layout in container with a fixed height</a></li> <li><a href="#bullet-4" title="IE's solution">IE's solution</a></li> <li><a href="#bullet-5" title="A perfect compounded sample">A perfect compounded sample</a></li> </ol> <h2><a id="bullet-1">Case One: Single line countainer with/without a fixed height</a></h2> <p>If you only want to display a container which only holds a single line of text, you can set <span class="property">line-height</span> property to <span class="property">height</span> property, then set <span class="property">overflow</span> to hidden.</p> <p><strong>Sample:</strong></p> <p id="demo-1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p><strong>Core code:</strong></p> <pre><code>.middle-demo-1{ height: 4em; line-height: 4em; overflow: hidden; }</code></pre> <dl> <dt>Notes:</dt> <dd> <ol> <li>I strongly recommend you use relative size in <span class="property">height</span> and <span class="property">line-height</span> property. <em>Why?</em> You can simply set the font size larger if your browser support it. When it gets large enough, you will see the countainer is stretched and the <span class="property">height</span> is no longer equal to <span class="property">line-height</span> property, thus, the layout is messed up. Using relative size as <span class="property">em, ex</span> or <span class="property">%</span> will let your countainer stretch with the content.</li> <li><span class="property">overflow: hidden</span> is a must. <em>Why?</em> Same as above. Just ensure <span class="property">height</span> and <span class="property">line-height</span> are always equal.</li> </ol> </dd> </dl> <dl> <dt>Pros:</dt> <dd> <ol> <li>Fits in both <span class="property">block</span> elements and <span class="property">inline</span> elements.</li> <li>Capable of all 5th-gen browsers.</li> </ol> </dd> </dl> <dl> <dt>Cons:</dt> <dd> <ol> <li>Text length is limited. Max with only <em>one</em> line.</li> <li>Does not work well on none text contents such as images and objects.</li> </ol> </dd> </dl> <p class="snap-back"><a href="#bullet-0" title="Back top table of centents">Back</a></p> <h2><a id="bullet-2">Case Two: Align multi-line container which does not have a fixed height</a></h2> <p>In this case, we should simply set a pair of fixed equivalences to padding-top and padding-bottom attribute. It works on both IE and non-IE browsers.</p> <p><strong>Sample:</strong></p> <div class="demo" id="demo-2"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.</p> </div> <p><strong>Core code:</strong></p> <pre><code>.middle-demo-2{ padding-top: 24px; padding-bottom: 24px; }</code></pre> <dl> <dt>Pros:</dt> <dd> <ol> <li>Fits in both <span class="property">block</span> elements and <span class="property">inline</span> elements.</li> <li>Works on none text contents as fine as text contents.</li> <li>Capable of all 5th-gen browsers. Might need a little tune-up for the box model bug of IE5 though.</li> </ol> </dd> </dl> <dl> <dt>Cons:</dt> <dd> <ol> <li>You can <em>not</em> assign height in this solution.</li> </ol> </dd> </dl> <p class="snap-back"><a href="#bullet-0" title="Back top table of centents">Back</a></p> <h2><a id="bullet-3">Case Three: Simulating table layout in container with a fixed height</a></h2> <p>CSS offers a set of very convenient display atrribute values called <span class="property">display: table</span>, <span class="property">display: table-row</span>, <span class="property">display: table-cell</span> and other display values begin with <span class="property">table-</span>. It offers a way to simulate table layout in all elements. As a result, any element with <span class="property">display: table-cell</span>, <span class="property">vertical-align: middle</span> and a fixed height will display exactly like a table cell.</p> <p><strong>Sample:</strong> (You may not be able to view the effect on IE)</p> <div class="demo" id="demo-3"> <div><div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas dignissim diam eu sem. Proin nunc ante, accumsan sollicitudin, sodales at, semper sed, ipsum. Etiam orci. Vestibulum magna lectus, venenatis nec, tempus ac, dictum vel, lorem.</p></div></div> </div> <p><strong>Core code:</strong></p> <pre><code>.middle-demo-3{ display: table-cell; height: 300px; vertical-align: middle; }</code></pre> <dl> <dt>Notes:</dt> <dd> <ol> <li><span class="property">display: table-cell</span> must work with other elements with <span class="property">display: table</span> value sets in order to form a literal table. Or it might cause unexceptable bugs.</li> <li>Sadly IE series (including the latest IE 7 beta) does not support any of <span class="property">display: table</span> values, so it won't work in IE.</li> </ol> </dd> </dl> <dl> <dt>Pros:</dt> <dd> <ol> <li>It has the most perfect render for <span class="property">vertical-align: middle</span> align.</li> </ol> </dd> </dl> <dl> <dt>Cons:</dt> <dd> <ol> <li>It only works in latest versions of non-IE browsers, such as Mozilla, Firefox, Netscape 8, Opera