`

div中使文本垂直居中

    博客分类:
  • wap
阅读更多

.item1{
    width: 412px;
    height:30px;
    background-color: #F2F6F9;
    margin-top: 30px;
    text-align:center;
    line-height:30px;

    }

 

注意:设置文本垂直居中必须要设置行高(line-height:10px;)

分享到:
评论

相关推荐

    DIV居中及DIV垂直居中.html

    该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.

    div+css文本水平垂直居中,兼容ie、谷歌等浏览器

    div+css文本水平垂直居中,兼容ie、谷歌等浏览器

    多行文字实现垂直居中

    div+css多行文字实现垂直居中,高度可自动适应

    CSS文本和div垂直居中方法总结

    主要介绍了CSS文本和div垂直居中方法总结,包括多行文本垂直居中,单行文本垂直居中,子div垂直居中,感兴趣的小伙伴们可以参考一下

    深入理解CSS行高line-height与文本垂直居中的原理

    前言在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了,比如下面的例子: 复制代码代码如下:<!DOCTYPE ...

    CSS设置多行文本垂直居中的方法

    多行文本垂直居中的CSS需要这么设置: 复制代码代码如下: /*多行居中对齐的方法,width,height必须使用px单位,再配合vertial-align:middle和display:table-cell属性,且div不能浮动*/ .vcenter { width: 100px; ...

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

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

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

    主要为大家详细介绍了CSS教程之div垂直居中的多种方法,还包括多行文本垂直居中的方法,感兴趣的小伙伴们可以参考一下

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

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

    div+css有实例,易学易懂

    6.2.2 利用行高属性使文本垂直居中 6.2.3 间隔与空白 6.2.4 文本的转换 6.3 水平和垂直居中问题 6.3.1 已知容器和内容大小的水平和垂直居中问题 6.3.2 未知容器的大小而已知内容大小的水平和垂直居中问题 6.3.3 已知...

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

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

    关于多行文字水平垂直居中的一点心得分享

    前些天在W3CPlus看到了一篇文章,提到用CSS制作水平垂直居中,在测试其中的第六点时发现了一些小问题: 添加了一个无意义的新标签 复制代码代码如下: <div id=”extra”> 当设定内容宽度的时候,文本换行了 对于...

    常用的css将元素垂直居中的6种方法

    设置line-height等于height,可使单行文本垂直居中 例: div { height: 50px; width: 200px; border: 1px solid #ccc; } 效果如下: 加入line-height属性后 div { height: 50px; width: 200px; border: 1...

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

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

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

    行高line-height实现单行文本垂直居中 以前一直认为单行文本垂直居中要将高度和行高设置成相同的值,但高度其实没必要设置。实际上,文本本身就在一行中居中显示。在不设置高度的情况下,行高撑开高度。 <style&...

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

    1. 文本居中 首先编写一个简单的html代码,设置一个类名为parentDiv的div对象。html代码如下: 复制代码代码如下:<div class=”parentDiv”>这里随意填写~… </div> .1 实现文字水平居中(使用text-align) 对div....

    关于html水平垂直居中的问题小结

    1.居中文本 复制代码代码如下:<div class=”wrap”> 我在中间…… </div>.. height+line-height+text-center(只能居中单行) .wrap{ width:px; height:px; border:px solid red; text-align: center; line-height: ...

    CSS 解决未知高度垂直居中实现代码

    尽管有CSS的vertical-align特性,但是并不能有效解决未知高度的垂直居中问题(在一个DIV标签里有未知高度的文本或图片的情况下)。

Global site tag (gtag.js) - Google Analytics