`
yl.fighter
  • 浏览: 257588 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

div居中问题 备忘.

    博客分类：
  • Web
IECSSSafariFirefoxOpera 
阅读更多 
<?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 8, and Safari.</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-4">Case Four: IE's solution</a></h2>
<p>Since IE is a lame browser when it comes to ANYTHING, so you can't use the solution above simply because IE does not recognize it at all. However, <strong>there has been nothing yet you can not code with CSS if you have already coded it with table</strong>. It even offers you possibility to layout your page that tables can not do!</p>
<p>So what's the solution for IE? Like what we always do: Hit IE's back with the BUGS it offers!</p>
<p><strong>Sample:</strong> (You are able to view the correct result only on IE)</p>
<div class="demo" id="demo-4">
 <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>
<pre><code>.middle-demo-4{
 height: 300px;
 position: relative;
}
.middle-demo-4 div{
 position: absolute;
 top: 50%;
 left: 0;
}
.middle-demo-4 div div{
 position: relative;
 top: -50%;
 left: 0;
}</code></pre>
<p>See? Don't ask me why it worked. This hack is based on years of study in IE's own stupid layout model and it works very well, even in IE5 given the box width hack. I won't tell you the theory behind all these. It's my top secret, with which I solved a lot of other cross browser layout problems, and I'm not going to share it with you. But you are free to use this IE hack It's kinda handful in most occassions.</p>
<dl>
 <dt>Pros:</dt>
 <dd>
  <ol>
   <li>The only perfect vertical align method in IE. It works even better then add automatic <span class="property">padding</span>s.</li>
  </ol>
 </dd>
</dl>
<dl>
 <dt>Cons:</dt>
 <dd>
  <ol>
   <li>After all it's a CSS hack. We can avoid it if not for IE.</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-5">Case Five: A perfect compounded sample</a></h2>
<p>Here's the perfect compounded solution on vertical centering that works on almost all latest browsers.</p>
<p><strong>Sample:</strong> (This works on almost all browsers)</p>
<div class="demo" id="demo-5">
 <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>
<p>I'm not going to give you the full code of this one. But it's not difficult to write it yourself, with the solution of case 3 and 4, and a little knowledge in IE/non-IE CSS hackers. And actually the hacking style is not limited, so I don't want to force you to use my hacking style neither. Stop being lazy, and write the code yourself!</p>
<dl>
 <dt>Browser capability:</dt>
 <dd>
  <ol>
   <li>Works on: IE6+, Mozilla 1.5+, Netscape Navigator 7+, Opera 7+, Firefox 1.0+ and Safari 1.0+</li>
   <li>On IE5, you might need to apply the box model hacker to make the height correct.</li>
   <li>Untested: WebOmini, Konqueror.</li>
   <li>Fails on: Other browsers not reffered in the list above.</li>
  </ol>
 </dd>
</dl>
<p class="snap-back"><a href="#bullet-0" title="Back top table of centents">Back</a></p>
<p class="copyright">Copyright &copy; Spenser Lee, 2006 Liberty Studio</p>
</div>
</body>
</html>
分享到：
| 利用Xpath读取XML文件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    div居中常见问题.docx

    在网页设计中，元素的居中布局是一种常见的需求，尤其对于创建美观和用户体验良好的网站至关重要。本文主要探讨了如何通过CSS实现不同类型的元素的水平居中。 首先，对于行内元素（如文本或图像），我们可以使用`...

    div居中常见问题.pdf

    例如，一个包含文本的 `div` 元素，可以通过以下 CSS 代码将其内部文本居中： ```css .txtCenter { text-align: center; } ``` 接下来，我们讨论块状元素的居中。对于定宽的块状元素，可以使用 `margin` 属性的...

    DIV居中及DIV垂直居中.html

    该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.

    HTML+CSS+DIV网页设计源码.zip

    HTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML+CSS+DIV网页设计源码.zipHTML...

    DIV+CSS DIV居中布局

    本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先，我们要理解`&lt;div&gt;`元素。`&lt;div&gt;`是“division”的缩写，代表一个区域或区块，在HTML中用于组合其他元素，是构建网页布局的基础。通过设置`&lt;div&gt;`...

    Divelements.SilverlightTools工具

    《Divelements.SilverlightTools工具：HTML容器的深度解析》 ...尽管随着技术的发展，Silverlight的使用逐渐减少，但Divelements.SilverlightTools所展示的跨技术集成理念，对于现代Web开发仍然具有启示意义。

    div表格垂直居中.docx

    【CSS实现div表格垂直居中】 在网页设计中，CSS（层叠样式表）是控制页面元素布局和样式的工具。垂直居中是常见的需求，尤其在制作响应式网页时，让内容无论在哪种屏幕尺寸下都能保持居中显得尤为重要。本文将介绍几...

    css3代码属性Flexbox实现内部div上下居中效果.zip

    这个压缩包“css3代码属性Flexbox实现内部div上下居中效果.zip”包含了如何使用Flexbox来让内部div在垂直方向上居中的实例。下面将详细介绍Flexbox的相关概念和如何实现此效果。 1. **Flexbox基本概念** - **Flex...

    css控制div中元素居中的示例.pdf

    CSS 控制 div 中元素居中的示例 本文将讨论 CSS 中常见的让元素水平居中显示的方法。这些方法可以让开发者更好地控制 div 中元素的布局，以实现更好的用户体验。 1. 使用自动外边距实现居中 CSS 中首选的让元素...

    DIV未知高度的垂直居中代码.rar

    标题中的“DIV未知高度的垂直居中代码”指的是在网页设计中如何使一个具有未知高度的&lt;div&gt;元素在页面上实现垂直居中的技术。在Web开发中，这是一项常见的需求，尤其是在响应式设计中，当内容高度不确定时，仍然希望...

    div框水平垂直居中跟内容垂直居中.html

    div框水平垂直居中跟内容垂直居中

    div表格垂直居中.pdf

    【CSS实现div表格垂直居中】\n\n在网页设计中，实现元素的垂直居中是一项常见的需求。本文主要探讨如何使用CSS实现div表格的垂直居中，包括单行内容、多行内容以及在不同浏览器环境下的兼容性解决方案。\n\n1. **...

    Jsp中如何让图片在div中居中

    在讨论JSP页面中图片居中的问题时，首先需要掌握一些基础的CSS布局知识，包括display属性的使用、垂直居中的方法、margin属性的自动居中技巧...在调试时，可逐一排查这些常见问题，确保图片能够在div中正确居中显示。

    unigui元素在父界面内居中.rar

    本教程将深入探讨如何在Unigui中使元素在父界面内居中，这是一个常见的布局需求，特别是在设计用户友好的界面时。 首先，了解Unigui的基本概念是必要的。Unigui的主要组件包括按钮、标签、编辑框、表格等，它们都...

    HTML+CSS+DIV网页设计.zip

    HTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS+DIV网页设计.zipHTML+CSS...

    div居中div居中的8种方法

    在网页设计中，让`div`元素居中是一项常见的需求，可以实现各种视觉效果和布局。标题提到的“div居中div居中的8种方法”是网页开发中的基础技巧，适用于不同场景。以下将详细解释这8种方法，并提供相关的应用示例。 ...

    js+CSS实现弹出居中背景半透明div层的方法.docx

    JS+CSS 实现弹出居中背景半透明 div 层的方法 在 Web 开发中，弹出居中背景半透明 div 层是一种常见的交互效果，通过 JavaScript 和 CSS，我们可以轻松实现这种效果。在本文中，我们将详细介绍如何使用 JS+CSS 实现...

    div在div中居中的多种方式演示.html

    提供了div在div中居中的多种方式，直接打开文件F12查看样式即可，简单方便。不再只会使用绝对布局

Magicbox
Global site tag (gtag.js) - Google Analytics