CSS+DIV创建一个可爱的小中心网站

来源：互联网发布：洛必达法则知乎高考编辑：程序博客网时间：2024/04/30 23:23

有几种不同的方式到垂直中心与CSS的对象，但它是很困难的选择是正确的。我会告诉你所有我见过的最好的方式，以及如何创建一个可爱的小中心网站。

用CSS垂直居中是不是一件容易的事。有许多不同的方式，在某些浏览器可能无法正常工作。让我们回顾一下5种不同的方式垂直居中的对象，以及每种方法的优点和缺点。（你可以看到我简要地解释他们所有的测试页。）

方法1

此方法设置一些<DIV> s到像一个表显示，所以我们可以使用表的垂直对齐属性（非常不同的其他元素）。

<div id="wrapper"><div id="cell"><div class="content">Content goes here</div></div></div>

#wrapper {display:table;}#cell {display:table-cell; vertical-align:middle;}

区别

内容可以动态改变高度（没有被定义在CSS）
内容不切断时，没有足够的空间，在包装

在Internet Explorer中不起作用（甚至不是IE 8测试版）
许多嵌套标签（不是真的说不好，这是一种主观的话题）

方法2

此方法将使用绝对定位的div，顶端设置到50％，和上边距设置为负半内容的高度。这意味着对象必须有一个固定的高度，是由CSS定义。

因为它有一个固定的高度，你可能想设置溢出：汽车;内容div，所以如果有太多的内容，以适应，滚动条会出现，而不是继续在外面的div的内容！

&lt;div id="content"&gt;Content Here&lt;/div&gt;

#content {position:absolute; top:50%; height:240px; margin-top:-120px;  / *负半的高度* / }

区别

作品在所有浏览器
不需要嵌套标签

当没有足够的空间，内容消失（如格是身体内的用户缩小浏览器窗口，滚动条不会出现）

方法3

在此方法中，我们将插入一个div上面的内容元素。这将设置高度：50％;和利润率底：-contentheight的。的内容，然后将清除浮动，并最终在中间。

<div id="floater"><div id="content">Content here</div></div>

#floater{float:left; height:50%; margin-bottom:-120px;}#content{clear:both; height:240px; position:relative;}

区别

作品在所有浏览器
当没有足够的空间（即窗口缩小），我们的内容将不会被切断，会出现一个滚动条。

只有一个我能想到的是，它需要一个额外的空元素（这是不坏，另一个主观题）

方法4

这种方法使用的位置是：绝对有一个固定的宽度和高度的div。的div，然后告诉拉伸至顶部：0;底部：0; 不能因为固定高度，因此保证金：自动;使坐在中间。这是类似的使用非常普遍的保证金：0汽车;水平中心块元素。

<div id="content">Content here</div>

#content {position:absolute; top:0; bottom:0; left:0; right:0;margin:auto; height:240px; width:70%;}

区别

容易

在Internet Explorer中不起作用（不工作了IE8 Beta）
没有滚动条的内容是削减在容器中，如果没有足够的空间

方法5

此方法仅中心的单行文本。简单地设置行高到对象的高度，并在中间的文本坐在

<div id="content">Content here</div>

#content {height:100px; line-height:100px;}

区别
作品在所有浏览器
不切断时，是没有足够的空间

纯文字作品（无块元素）
当有超过单行（如当它包装），它打破严重

这种方法是非常有用的小元素，如中心内的一个按钮或文本单行文本字段，。

有哪些方法？

我最喜欢的方法是3号-使用漂浮物和清除内容。它不会有任何重大的缺点。因为内容将清除：既;，你也可以把它上面的其他元素，窗口崩溃时，中心内容将不包括他们。见演示。

<div id="top"><h1>Title</h1></div><div id="floater"></div><div id="content">Content Here</div>

#floater{float:left; height:50%; margin-bottom:-120px;}#top{float:right; width:100%; text-align:center;}</strong>#content{clear:both; height:240px; position:relative;}

现在你知道它是如何工作的，让我们开始创建一个简单但有趣的网站！最终产品将是这个样子：

第1步

它总是好的开始，语义标记。这是我们的页面如何将结构：

＃浮子（推到中间的内容）
＃中心（中心框）
- ＃方
  - ＃标志
  - ＃NAV（无序名单<UL>）
- ＃内容
＃底部（版权等）

这里是我将使用XHTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>A Centred Company</title><link rel="stylesheet" href="styles.css" type="text/css" media="all" /></head> <body><div id="floater"></div><div id="centered"> <div id="side"><div id="logo"><strong><span>A</span> Company</strong></div><ul id="nav"><li><a href="#">Home</a></li><li><a href="#">Products</a></li><li><a href="#">Blog</a></li><li><a href="#">Contact</a></li><li><a href="#">About</a></li></ul></div> <div id="content"> <h1>Page Title</h1> <p>Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing. Energistically simplify impactful niche markets via enabled imperatives. Holisticly predominate premium innovation after compelling scenarios. Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products. Distinctively syndicate standards compliant schemas before robust vortals. Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information. </p> <h2>Heading 2</h2> <p>Efficiently embrace customized web-readiness rather than customer directed processes. Assertively grow cross-platform imperatives vis-a-vis proactive technologies. Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces. Conveniently streamline competitive strategic theme areas with focused e-markets. Phosfluorescently syndicate world-class communities vis-a-vis value-added markets. Appropriately reinvent holistic services before robust e-services. </p> </div> </div> <div id="bottom"><p>Copyright notice goes here</p></div></body></html>

第2步

现在我们将开始与一些基本的CSS的页面布局。你应该把这个styles.css的，这是挂在我们的HTML。

html, body {margin:0; padding:0;height:100%;} body {background:url('page_bg.jpg') 50% 50% no-repeat #FC3;font-family:Georgia, Times, serifs;} #floater {position:relative; float:left;height:50%;margin-bottom:-200px;width:1px;} #centered {position:relative; clear:left;height:400px; width:80%; max-width:800px; min-width:400px;margin:0 auto;background:#fff;border:4px solid #666;} #bottom {position:absolute;bottom:0; right:0;} #nav {position:absolute; left:0; top:0; bottom:0; right:70%;padding:20px; margin:10px;} #content {position:absolute; left:30%; right:0; top:0; bottom:0;overflow:auto; height:340px;padding:20px; margin:10px;}

之前，我们可以使我们的内容垂直居中，身体和HTML必须延伸到100％的高度。因为里面的padding和margin的高度，我们必须让他们0，这样滚动条不会出现只是告诉你一个小幅度。

浮动的保证金，底部是内容的高度（400像素）的一半，这是200像素。

你现在应该有一些看起来像这样：

＃为本的宽度是80％。这是使您的网站上的小屏幕和大屏幕上宽小（我的中大屏幕上，许多老的网站是在左上角的小，它是有点恼人）。这被称为有液体的布局。设置最小宽度和最大宽度也停止过大或过小。互联网的总管doen't支持分钟最大widtgh虽然。很明显，你可以选择，而不是有一个固定的宽度。

因为＃为中心的相对位置，我们可以使用它里面的绝对定位来定位元素。溢出：汽车上使用＃内容，所以会出现一个滚动的内容时，它里面不适合。Internet Explorer中不喜欢溢出：汽车;除非我们告诉它的高度（不只是顶部和底部的位置，而不是在％），所以我们也这样做。

第3步

最后要做的是添加一些更多的风格，以使它看起来有点更好。让我们开始菜单。

#nav ul {list-style:none;padding:0; margin:20px 0 0 0; text-indent:0;} #nav li {padding:0; margin:3px;} #nav li a {display:block; background-color:#e8e8e8;padding:7px; margin:0;text-decoration:none; color:#000;border-bottom:1px solid #bbb;text-align:right;} #nav li a::after {content:'»'; color:#aaa; font-weight:bold;display:inline; float:right;margin:0 2px 0 5px;} #nav li a:hover, #nav li a:focus {background:#f8f8f8;border-bottom-color:#777;} #nav li a:hover::after {margin:0 0 0 7px; color:#f93;} #nav li a:active {padding:8px 7px 6px 7px;}

进入菜单样的事情的清单转弯时做的第一件事是删除点分列表式：没有，所有的margin和padding。如果你想让它有一个保证金或填充，确保您指定的究竟是什么，不要离开它，因为他们可以改变的网页浏览器的默认。

接下来的事情要注意的是，该链接设置为块元素显示。这使得他们填补了整条生产线，并为您提供更多的对它们的控制。如果你想使你的菜单水平（本设计中不起作用），那么你就可以使他们以及浮动。

其他有趣的事情，需要注意的菜单是：前和后的CSS伪元素让你插入之前和之后的元素含量。这是一个很好的方式，包括小图标或字符，如在年底的每一个环节的箭头。这并不工作在Internet Explorer中，虽然之前的版本8。

第4步

最后要做的是添加一些CSS使页面看起来有点更好。

#centered {-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;} h1, h2, h3, h4, h5, h6 {font-family:Helvetica, Arial, sans-serif;font-weight:normal; color:#666;} h1 {color:#f93; border-bottom:1px solid #ddd;letter-spacing:-0.05em; font-weight:bold;margin-top:0; padding-top:0;}  #bottom {padding:10px;font-size:0.7em;color:#f03;}  #logo {font-size:2em; text-align:center;color:#999;} #logo strong {font-weight:normal;} #logo span {display:block;font-size:4em; line-height:0.7em;color:#666;} p, h2, h3 {line-height:1.6em;} a {color:#f03;}

一个要注意的是圆角＃中心。CSS3中，应该有一个边界半径属性来设置圆角的半径。这不是任何主流浏览器实现，然而，除非你使用的万盎司或WebKit的前缀（Mozilla的Firefox和Safari / Webkit的）

兼容性说明

正如你可能已经猜到了，Internet Explorer是唯一的主浏览器，给你带来麻烦：

＃浮子必须有宽度的定义，它不会做任何版本的IE浏览器中的任何
IE 6有太多的空间，在我们的菜单打破
IE 8以上的额外空间
站长百科同步首发原文地址 http://www.software8.co/wzjs/cssdiv/268.html