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

整理div左右垂直居中解决方案

 
阅读更多
<style type="text/css">
.main{
    position:absolute;
    top:50%;
    left:50%;
    width:400px;
    height:100px;
    margin-top:-50px;
    margin-left:-200px;

    border:2px solid yellow;
    line-height:30px;
    font-size:16px;
    }
.main2{
    font-size:16px;
	color:blue;
}
</style>
<div class="main">Div居中:使用div绝对位置定位,解决垂直居中问题,需确定div宽度和高度。</div>
<div style="text-align:center;height:400px;vertical-align:middle;line-height:400px;border:1px dashed black;"><p class="main2">文字居中:text-align:center;左右vertical-align上下支持所有浏览器,需确定外廓的高度。line-height与height一致<p></div>
<div style="position:absolute;bottom:10px;left:50%;color:grey;font-size:12px;width:200px;margin-left:-100px;">Q群码农三七二十一(2177712)撞墙整理</div>

分享到:
评论

相关推荐

    css实现div水平、垂直居中兼容chrome、ie8

    主要介绍了使用css实现的div水平、垂直居中并且兼容chrome、ie8,具体示例如下,需要的朋友可以参考下

    div水平垂直居中的完美解决方案

    很多情况需要用到div的居中,下面是脚本之家编辑参考一些网站整理的一篇文章。希望对朋友们有所帮助。

    div垂直居中-CSS元素垂直居中方法的探究

    针对学员疑问“div垂直居中?”引出的“CSS元素垂直居中一系列方法的探究”的针对性课程,课程包含两方面:1、文本垂直居中的解决方案;2、块级元素垂直居中的解决方案。

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

    在布局的传统解决方案中,都是基于盒状模型,依赖display属性、position属性、float属性,这种方式比较传统,对于那些特殊布局来说非常不方便,比如,垂直居中就不容易实现。 尤其是现在移动设备如此多的今天,...

    div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)

    接下来将介绍下:div垂直居中的N种方法包括:单行垂直居中/多行未知高度文字的垂直居中/多行文本固定高度的居中/在InternetExplorer中的解决方案等等感兴趣的你可不要错过了哈,或许本文所提供的方法对你有所帮助

    CSS设置DIV垂直居中的N种方法 兼容IE浏览器

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?... Tips: 完美解决方案在文末! 一、单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需

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

    在布局的传统解决方案中,都是基于盒状模型,依赖display属性、position属性、float属性,这种方式比较传统,对于那些特殊布局来说非常不方便,比如,垂直居中就不容易实现。 尤其是现在移动设备如此多的今天,需要...

    CSS水平垂直居中解决方案(6种)

    垂直水平居中方案一:知道宽度的情况下 absolute+margin负值 .parent { width:400px; height:400px; background: red; position: relative; } .child { position: absolute; left:50%; top:50%; background...

    div CSS技巧

    div使用css的总结,很...解决方案是在这个div里面加上display:inline; 例如: &lt;#div id=”imfloat”&gt; 相应的css为 #IamFloat{ float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}

    让html元素随浏览器的大小自适应垂直居中的实现方法

    实现div垂直居中并在缩放浏览器尺寸的时候仍然居中。 解决方案: 1、浏览器可视区域的高度-元素的高度/2 = 元素距离浏览器可视区域顶部的距离。 (bodyHeight – divHeight)/2 2、浏览器可视区域如果小于元素的高度,...

    CSS 多浏览器兼容性问题及解决方案

    Javascript 多浏览器兼容性问题及解决方案 兼容性处理要点 1、DOCTYPE 影响 CSS 处理 2、FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width 3、FF:...

    css浏览器兼容性前端人员的必备

    解决方案是在这个div里面加上display:inline; 例如: &lt;#div id=”imfloat”&gt; 相应的css为 #IamFloat { float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/ }

    CSS之居中布局的实现方法

    在下来我们对各种场景一一列出解决方案。 水平居中 水平居中相对于其它几中居中排列要简单的多,按标签元素可分为行内元素与块级元素居中: 1、行内元素 如:a img span em b small 此类标签元素及文本 .center { ...

    CSS 浏览器兼容问题整理大全(比较全)

    从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声名....解决方案是在这个div里面加上display:inlin

    HTML+CSS相对宽度和绝对宽度冲突时的div解决方法

    题目1很简单,有许多种解决方案,我就不一一赘述了 分析题目2,发现有两个关键的需求: 相对宽度:格子的相对宽度(比例)不变 绝对宽度:格子间的绝对距离不变 如果只关注相对宽度,那么很简单,令左边格子的宽度...

    html中使用margin:0 auto整个页面不居中的解决方法

    今天写个jsp页面,乍么调来调去&lt;div xss=removed&gt;123xxx&lt;/div&gt; 这个属怎么弄都不能让页面居中展示,而且其它样式也出现莫名其妙的问题 后来找这个这个问题的解决方案: 原来是L-Blog默认没有在HTML前加上DTD,于是...

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

    在布局的传统解决方案中,都是基于盒状模型,依赖display属性、position属性、float属性,这种方式比较传统,对于那些特殊布局来说非常不方便,比如,垂直居中就不容易实现。 尤其是现在移动设备如此多

    CSS多浏览器兼容性(IE和Firefox)技巧大全推荐

    对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE...解决方案是在这个div里面加上display:inline; 例如: 复制代码代码如下: &lt;#div id=”imfloat”&gt; 相

    目前比较全面的浏览器CSS BUG兼容汇总

    对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 其它请参考:CSS hack 针对IE6,IE7,firefox显示不同效果 1.div的... 解决方案是在这个div里面加上displa

    AspNetPager.dll

    AspNetPager针对ASP.NET分页控件的不足,提出了与众不同的解决asp.net中分页问题的方案,即将分页导航功能与数据显示功能完全独立开来,由用户自己控制数据的获取及显示方式,因此可以被灵活地应用于任何需要实现...

Global site tag (gtag.js) - Google Analytics