css div 横向居中写法

本文章就单独讲一下关于css教程 div 横向居中写法的用法,并且在ie,ie7,firefox兼容问题。

横向居中(centering)

  这是一个简单的技巧,但是值得再说一遍,因为我看见太多的新手问题都是问这个:css如何横向居中?您需要定义元素的宽,并且定义横向的margin,假如您的布局包含在一个层(容器)中,您可以这样定义使它横向居中:

#wrap {
width:760px; /* 修改为您的层的宽度 */
margin:0 auto;
}

  但是ie5/win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:用text-align属性,就像这样:

body {
text-align:center;
}
#wrap {
width:760px; /* 修改为您的层的宽度 */
margin:0 auto;
text-align:left;
}

  第一个body的text-align:center; 规则定义ie5/win中body的所有元素居中(其他浏览器只是将文字居中),第二个text-align:left;是将#warp中的文字居左。

时间: 2024-07-29 09:26:05

css div 横向居中写法的相关文章

css+div 横向二级菜单代码

提示:您可以先修改部分代码再运行 css+div 横向二级菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行

css+div实现居中实例教程

Demo of middled vertical align Author: Spenser Lee, Liberty Studio Originally posted on BlueIdea Forum Table of centents: Single line countainer with/without a fixed height Align multi-line container which does not have a fixed height Simulating tabl

CSS Div完美居中方法

CSS中有很多(水平/垂直)居中的方法今天刚好看到一个新的方法,嘿嘿,自我感觉一下非常好用.而且以前我也没见过.所以今天就记一下.下次备用 HTML  代码如下 复制代码 <DIV class="demo center"> <DIV></DIV></DIV>CSS .center{ /* 需要宽度支持但自适应 */  position:relative; } .center>*{ /* ie8+,ie7-请使用js或者其它方法 */

css div 布局hack写法

现在是分开写的 .111cnHack{     float: left;     margin-left: 20px; } *   .111cnHack{     _display:inline; /*hacked for IE 6*/ } 以前是这样写hack 111cnHack{      float: left;     margin-left: 20px;     _display:inline; /*hacked for IE 6*/ }

css控制div不能居中的解决办法

  1.css控制div不能居中最容易犯的也最简单的就是没写DTD语句,不符合w3c规则,这个解决起来很容易,在页面的最上方加上: 就行了!其实还有很多css失效的问题也都是因为没有写dtd语句而引起的. 2.使用margin来让DIV居中 最简单的写法就是: .divtemp{ margin:0 auto; } 还可以这样: .divtemp{ margin-left:auto; margin-right:auto; } 这样就可以让DIV居中了! 用css控制div居中

css div 实现图片从左向右自动横向排列

我们先来看看效果图片再一步步分析实例代码了. 首先我们来看这一块代码. <dl>      <dt>      <a href="pbum.php?uid=14" ><span></span>      <img src="http://111cn.net/124461405936.jpg" alt="image" width="170" height=&quo

css实现图片在div中居中的效果

利用图片的margin属性将图片水平居中,利用div的padding属性将图片垂直居中. 结构代码同上: css代码如下: div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;} img {display:block; margin:0 auto;} 备注: img是内联元素,要设置其margin属性使其居中,就要将其转换为块元素display:block;然

如何用CSS制作横向菜单

css|菜单 尽管在我的网站和文章里都有提到CSS制作菜单的方法,但很多初学者还是不太清楚如何实现,以及实现原理,我想专门写一篇详细教程会对大家比较有帮助. 我们先来看一个菜单的例子,最终效果是: 首页 产品介绍 服务介绍 技术支持 立刻购买 联系我们 然后我们来详细讲解步骤 第一步:建立一个无序列表 我们先建立一个无序列表,来建立菜单的结构.代码是: <ul><li><a href="1">首页</a></li><li

CSS实现横向导航菜单

CSS实现横向导航菜单教程,一步一步教你制作.   主题代码部分: <ul id="nav">      <li><a href="http://www.alixixi.com/">CSS趋势</a></li>      <li><a href="http://www.alixixi.com/">CSS教程</a></li>      &l