文字在div中水平和垂直居中的的css样式

text-align:center; /*水平居中*/
line-height: 20px; /*行距设为与div高度一致*/
示例如下:
HTML元素
<div>水平垂直居中</div>
css样式
div{
width:200px;height:200px; /*设置div的大小*/
border:1px solid green; /*边框*/
text-align: center; /*文字水平居中对齐*/
line-height: 200px; /*设置文字行距等于div的高度*/
overflow:hidden;
}

文字在div中水平和垂直居中的的css样式的更多相关文章

  1. 使文字在div中水平和垂直居中的的css样式为,四个边分别设置阴影样式

    text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ HTML元素 <div>水平垂直居中</div> ...

  2. 未知行数的文字在div中垂直居中

    今天工作中遇到一个问题,就是未知行数的文字在div中怎么垂直居中,如下面的3个图: 图1 图2 图3 图1是2行文字的效果,图2是不经过css垂直居中处理的效果,图3是经过css垂直居中后的效果,ht ...

  3. div的水平和垂直居中

    CSS实现div的水平居中 div的水平居中可以通过margin设置为0 auto实现. .myDiv { width: 200px; height: 100px; margin: 0 auto; } ...

  4. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  5. [转]如何让div中的内容垂直居中

    转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...

  6. 如何让div中的内容垂直居中

    虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...

  7. 一个div在另一个div中水平垂直的方法

    html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...

  8. div中的img垂直居中的方法,最简单! 偷学来的,,,不要说我抄袭啊(*^__^*)

    让div中的img垂直居中,水平居中很简单,用text-align:center; 让div中img垂直居中的方法其实也很简单 重点是: display:table-cell;   让标签具有表格的属 ...

  9. css 如何使图片与文字在div中居中展示?

      1.情景展示 如何将图片与文字在div中一起居中展示? HTML片段 <div style="background: #fff;padding-top: 5px;border:1p ...

随机推荐

  1. 序列化为XML

    java类序列化成xml 方法[转] 今天看了下JAVA序列化.还是一知半解.怎么也没有弄明白,怎么序列化成XML文件.处入半解状态.在网上找了很多,大部分是理论上的.没有实际的例子.功夫不负有心人, ...

  2. PAT1010

    Given a pair of positive integers, for example, 6 and 110, 给出一对正整数,例如6和110 can this equation 6 = 110 ...

  3. STM32开发指南-跑马灯实验

    简单对I/O口的控制,主要通过对寄存器的读写控制.主要通过I/O的寄存器来控制:1. 控制I/O的方向2. 控制I/O的输出电平或上下来电阻3. 存储I/O口当前的输入状态(高低电平) 对使用LED灯 ...

  4. hibernate---一对一单向外键关联--annotation (重要!!!)

    1. 生成wife.java: package com.bjsxt.hibernate; import javax.persistence.Entity; import javax.persisten ...

  5. spring mvc获取路径参数的几种方式 - 浅夏的个人空间 - 开源中国社区

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  6. Spring MVC 程序首页的设置 - 一号门-程序员的工作,程序员的生活(java,python,delphi实战)

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

  7. IE去掉input的type=”text”输入内容时出现的X和type=”password”出现的眼睛图标

    从IE 10开始,type=”text” 的 input 在用户输入内容后,会自动产生一个小叉叉(X),方便用户点击清除已经输入的文本.对于type=”password”的 input 则会在右方显示 ...

  8. RAC(ReactiveCocoa)

    什么是 ReactiveCocoa ReactiveCocoa(其简称为 RAC)是由 Github 开源的一个应用于 iOS 和 OS X 开发的新框架.RAC 具有函数式编程和响应式编程的特性.它 ...

  9. mysql问题: alter导致速度慢

    1 如何并行执行. 数据库里有一个数据量非常大的表,当对这个表进行alter的时候,这时候该表是只读的,由于数据量很大alter时间很长,如果这时候有insert或update操作,有什么办法在这期间 ...

  10. BufferedReader 输出与BufferedWriter 输入的用法

    public static void main(String[] args) {  String content[] = {"好久不见了","最近好吗",&qu ...