`
super_521
  • 浏览: 49742 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

控制DIV中的文字绝对居中

 
阅读更多
    搞了这么久,以前不知道怎么弄,老是用表格,今天终于搞清楚了。。。

 

    水平居中:<div align="center">Content</div>

 

    垂直居中:<div style="line-height:30px;height:30px;">Content</div>

 

    两者结合,就可以绝对居中了:

    <div style="line-height:50px;height:50px; padding:10px;" align="center">Content</div>

 

    不过对于垂直居中,却要设置固定高度,有点不方便,暂时想不到什么方法来解决自适应高度。

分享到:
评论

相关推荐

    控制DIV中文字绝对居中的简单方法

    两者结合,就可以绝对居中了: 复制代码代码如下: &lt;div xss=removed align=”center”&gt;Content&lt;/div&gt; 不过对于垂直居中,却要设置固定高度,有点不方便,暂时想不到什么方法来解决自适应高度。

    div 垂直居中的多种方法详细介绍

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的...一、单行垂直居中 如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要

    PeterChen1997#Frontend-Repo#2-div水平垂直居中方法1

    div水平垂直居中方法绝对定位(margin:auto实现居中)/* margin设置为auto实现绝对定位元素的垂直居中 */绝对定位(margin 负值实现

    元素及文本的水平居中/垂直居中/绝对居中总结

    要让div2在div1中横向居中,解决办法如下: 1.IE中,设置div1的样式:text-align:center;该方法在IE8以上版本和firefox中仅适用于行内元素居中(display:inline;和display:inline-block;及类似效果的元素以及文本,...

    css实现文本和div居中对齐详细讲解示例

    .1 实现文字水平居中(使用text-align) 对div.parentDiv设置text-align: center;来实现。CSS代码如下: 复制代码代码如下:[css] &lt;p&gt;.parentDiv {width:200px;height:100px;border: 1px solid #ececec;text-align:...

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

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以...如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需

    元素及文本的居中(层的横向居中/层的垂直居中/绝对居中)

    元素及文本的居中包括(层的横向居中/层的垂直居中/绝对居中)以及文本挣开div的题,也在这里给予了解决方法,感兴趣的朋友可以了解下啊,希望本文可以帮助到你

    CSS常见的让元素水平居中显示的方法

    用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋。...在实际使用中,我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是,必须为

    CSS教程之div垂直居中的多种方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我...如果一个容器中只有一行文字,对它实现居中相对比较简单,我们只需要设置它的实际高度height和所在

    CSS实现垂直居中的4种思路详解

    行高line-height实现单行文本垂直居中 以前一直认为单行文本...&lt;div class=test&gt;测试文字&lt;/div&gt; 设置vertical-align:middle实现垂直居中 【1】设置父元素的display为table-cell 通过为table-cell元素设置vertical-al

    零基础学HTML CSS源代码

    CSS控制DIV.html CSS控制DIV.html DIV+CSS布局.html DIV+CSS布局.html div.css 名为div的样式文件。 style.css 名为style的样式文件。 第15章(源代码\第15章) 示例描述:本章演示...

    Web前端大作业-港珠澳大桥.zip

    网站底部分别是网站版权介绍信息,采用居中透明显示,文字大小和样式用css来控制,美观大方。 3、网站具体设计过程 首先选定 本网页制作工具是前端开发利器: WebStorm,创建前端项目工程,并创建相应的文件夹,...

    《程序天下:JavaScript实例自学手册》光盘源码

    7.14 状态栏中文字从中间分开显示 7.15 屏蔽掉IE自带的功能键 第8章 链接特效 8.1 关闭窗口的链接 8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个...

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

    然后插入文字,就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline; 例如: 复制代码...

    程序天下:JavaScript实例自学手册

    7.14 状态栏中文字从中间分开显示 7.15 屏蔽掉IE自带的功能键 第8章 链接特效 8.1 关闭窗口的链接 8.2 不用CSS实现链接样式的变化 8.3 让链接没有下划线 8.4 去掉超链接点击时的框 8.5 显示页面中所有链接 8.6 一个...

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

    然后插入文字,就垂直居中了。缺点是要控制内容不要换行 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inlin

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

    对于web2.0的过度,请... 然后插入文字,就垂直居中了。缺点是要控制内容不要换行。 2. margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。 解决方案是在这个div里面加上displa

    H5+CSS3.zip

    语义化标签:段落标签,标签自定义文字样式,标题标签,&lt;div&gt;块,标签定义头部,标签定义底部,标签定义正文区段,标签定义侧边栏区域; 效果标签: 标签实现换行效果,特殊字符&nbsp;实现空格效果,标签实现...

    html入门到放弃笔记

    1、编写一对 body 标记,在body标记中,嵌套一对 div标记,在 div 标记中 ,嵌套一对 a 标记,在 a标记中,嵌套一对 b 标记,b标记中,随意编写一些文本 &lt;body&gt; &lt;div&gt; 这是一段测试文本 &lt;/div&gt; &lt;...

Global site tag (gtag.js) - Google Analytics