文字在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. HDU 1176 免费馅饼(数塔dp)

    一开始被吓到了,后来再仔细一读发现就是一个数塔,没有那么复杂 #include<stdio.h> #include<string.h> #include<algorith ...

  2. ASP.NET WebService

    一.WebService:WebService是以独立于平台的方式,通过标准的Web协议,可以由程序访问的应用程序逻辑单元. (1)应用程序逻辑单元:web服务包括一些应用程序逻辑单元或者代码.这些代 ...

  3. MyEclipse2014/2015 安装Activiti插件

    一.废话 按照传统的教程而言,安装Activiti Designer 可以从 Help -> Install New Software Name:Activiti BPMN 2.0 design ...

  4. photosho 等距复制或旋转复制

    选区是不可以复制的,不过可以用这个方法:1.新建图层,任意绘制一个图形2.ctrl+j复制一层,ctrl+T 切换到变形工具,移动或变形该图形后enter.3.按Alt+Shift+ctrl+T.4. ...

  5. ural1439 Battle with You-Know-Who

    Battle with You-Know-Who Time limit: 2.0 secondMemory limit: 64 MB Rooms of the Ministry of Magic ar ...

  6. PAT (Advanced Level) 1026. Table Tennis (30)

    情况比较多的模拟题. 交了50发的样子才AC......AC之后我的天空星星都亮了. #include<iostream> #include<cstring> #include ...

  7. CodeForces 606A Magic Spheres

    水题 /* *********************************************** Author :Zhou Zhentao Email :774388357@qq.com C ...

  8. mssql数据库syscolumns表中xtype列

    xtype    类型34 image35 text36 uniqueidentifier48 tinyint52 smallint56 int58 smalldatetime59 real60 mo ...

  9. 试水 Egret :TouchEvent与EnterFrame相关

    由于Egret是照着ActionScript的api去做的,且TS就是JS,JS和AS都是兄弟语法,同属于ECMAScript语法系的,所以我就直接测试了的. 如下: var sp:egret.Spr ...

  10. (干货)一次httpclient的close_wait问题的探讨

    从图中可以看出,如果客户端被动关闭连接,且没有向服务器端发送FIN,则会一直处于CLOSE_WAIT状态. 处理服务器在处理完请求,与后端Nginx之间的连接仍然保持着CLOSE_WAIT状态,个数为 ...