用CSS实现文字垂直居中的代码

2016-02-19 19:40 3 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享用CSS实现文字垂直居中的代码，希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - Web开发】

　　用CSS实现文字垂直居中的代码

style type="text/css"
!--
.con_div{
width:400px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
background:red;
color:#fff
}
/*FOR IE*/
.webjx{
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
--
/style
div class="con_div"
span class="webjx"/span
测试内容
/div

来源:http://www.tulaoshi.com/n/20160219/1621549.html

上一篇：用CSS实现背景半透明效果的方法实现
下一篇： MAC下如何将Dock 栏图标变成实时系统监控器

看过《用CSS实现文字垂直居中的代码》的人还看了以下文章更多>>

DIV实现垂直居中对齐的方法

标签： Web开发

尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持...

CSS定高多行垂直居中

标签： Web开发

用Table布局可以很容易的实现文字和图片的垂直居中，但是在div的布局中呢，要实现定高容器里面的内容的垂直居中不是太简单的事情。在DOM标准中在IE中综合 #boxOuter { display:table; height:300px; width:500px; border:solid 1px black; &n...

CSS技巧：如何使未知高宽的图片实现垂直居中

标签： Html CSS布局 Div+CSS XHTML

在一个容器里再定义一个绝对定位的p容器，再在p容器里放需要垂直居中的图片，图片定义相对定位的CSS。直接上CSS代码： #pic { width:300px; height:300px; background-color:green; border:6px solid #ccc; text-align:center; position:relative; display:table-cell; vertical-align:middle; } #pic p { *position:absolute;...

CSS垂直居中网页布局实现的5种方法

标签： Web开发

利用 CSS 来实现对象的垂直居中有许多不同的方法，比较难的是选择那个正确的方法。我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站。使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。) 方法一这个...

CSS教程：在网页布局中简单实现垂直居中的办法

标签： Html CSS布局 Div+CSS XHTML

英文原文： http://www.search-this.com/2008/05/15/easy-vertical-centering-with-css/ 中文译文： http://www.12sui.cn/blog/71.html 本人英语还没过四级，所以不能说是翻译把，只能说是按照自己的理解去叙述了一遍作者的意思，请各位多多指教。译文内容：当你发觉你曾经以为的事实其实并不是那样，你会感觉很开心。旧的方法经...

查看更多精彩>>