html中div的居中

背景:html中的div可以说是布局神器,但是有些时候没有那种一步到位的属性来定义某个div来居中。故需要手动写css来调试

代码(code):

<style type="text/css"><!-- div {	position:absolute;	top:50%;	left:50%;	margin:-150px 0 0 -200px;	width:400px;	height:300px;	border:1px solid #008800;	}--></style><div>让层垂直居中于浏览器窗口</div>

 其实解决的思路是这样的:首们需要position:absolute;绝对定位。而层的定位点,使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如:一个层宽度是400,高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为-150。margin-left的值为-200。这样我们就实现了层垂直居中于浏览器的样式编写 

注:上面的是一般用于垂直居中与浏览器,想解决div垂直居中与外层div的话,只需要给外层div加上position:relative;就好了;记住,外层div要设定高度和宽度

代码部分是贴自网络。思路很好,值得学习和借鉴。
时间: 2024-10-13 12:00:16

html中div的居中的相关文章

解决IE中div不居中的问题(尤其IE5)

最近布局时遇到了一个问题,就是如何设置div居中?通过查找资料终于找到了解决方案,只需要把要居中的div外嵌套一个div,设置其“text-align:center;”,然后设置要居中的div为“margin-left:auto;margin-right:auto;”提示:若设置后IE5中仍不居中,只需将外层div设置为“width:100%;”,即可解决问题.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo

HTML CSS 中DIV内容居中汇总

转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还望博主见谅) 在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中的确是有vertical-align属性,但是它只对(X)HTML元素中拥有valig

DIV+CSS中让布局居中_背景图片居中_文字内容居中

DIV+CSS中让布局居中_背景图片居中_文字内容居中

html中div标签的使用方法

 CSS是DHTML的基础,CSS用于设定HTML元素在页面上的显示风格,而CSS-P则是CSS的一个扩展,它可用来控制HTML元素在网页上或者说在窗口的位置.下面的两个链接提供了CSS和CSS-P详尽的技术手册: W3C CSS-Positioning Builder.com's CSS Guide 在本课程中,将会反复地对CSS进行介绍. 使用DIV标签 使用CSS-P,主要依靠< div >标签来实现,当你把HTML内容放在< div >标签里时,可以称它为:"

jquery 中 $(&#39;div&#39;,&#39;li&#39;)

要搞清楚$('div','li') 和 $('div , li') 和 $('div li') 区别$('div','li')是$(子,父),是从父节点里找子,而不是找li外面的div $('div , li')才是找所有的div和li,之间不存在父子关系 $('div li') 是找div里面所有li,包括子级,孙子级,总之就是div里面所有li,不管有几层关系 还可以 $("#touristLists tr").each(function () { if ($("inpu

div如何居中

整理一点关于div居中的方法.哪里有不妥欢迎大家拍砖~ div里的内容如何居中: 水平居中(非块级元素): text-align:center; 垂直居中: vertical-align:middle; 内容是文字的话,可以将height和line-height设置成一样的值: 简单方法(但不是全部兼容): 1 display: -webkit-flex; 2 display: flex; 3 -webkit-align-items: center; 4 align-items: center;

左边图标右边文字,在div里居中

图1 图2 css制作: 左边一个小图标,右边文字,两者之间一点间隔,再在一个div 里面居中显示.(div不设置宽度) 第一种做法: 图3 图4 .m-sn {    font-size: 12px;    color: #999;    background-color: #FFF;    line-height: 22px;    height: 22px;    padding-bottom: 24px;    text-align: center; // 这是最常用的} .m-sn s

(转载)html中div使用自动高度

为什么要使用div标签 1.更多的配置项,那就意味着更灵活,当然,难度也更高: 2.可以方便的容纳其他html标签: static定位就是不定位,出现在哪里就显示在哪里,这是默认取值,只有在你想覆盖以前的定义时才需要显示指定;relative 就是相对元素static定位时的位置进行偏移,如果指定static时top是50象素,那么指定relative并指定top是10象素时,元素实际top就是60象素了.absolute绝对定位,直接指定top,left,right,bottom.有意思 的是

WPF之让ListView中的CheckBox居中显示

第一步:在资源中定义一个居中的样式: <Window.Resources> <Style x:Key="ListViewItemStyle" TargetType="{x:Type ListViewItem}"> <Setter Property="HorizontalContentAlignment" Value="Stretch"/> </Style> </Window