<BODY>
  <div class="box">
   <h3>1.单行文字居中</h3>
   <!--设置行高来实现-->
   <div class="box1">
    这是高度为30像素的单行文字
   </div>
 
   <h3>2.多行文字不定高度居中</h3>
   <!--运用padding来实现-->
   <div class="box2">
    <div>多行文字不定高度居中</div>
    <div>多行文字不定高度居中</div>
    <div>多行文字不定高度居中</div>
   </div>
 
  </div>
 </BODY>

=============================

.box {
 width: 800px;
 margin: 50px auto;
 border: 1px solid red;
 font-size: 16px;
 text-align: center;
}
.box1 {
 border: 1px dashed red;
 line-height: 40px;
 margin: 30px;
}
.box2 {
 border: 1px dashed red;
 padding: 60px 0;
 margin: 30px;
}
 
 
参考： http://www.cnblogs.com/siqi/archive/2013/06/16/3138289.html

多行文字水平垂直居中在div的更多相关文章

  1. table-cell实现未知宽高图片，文本水平垂直居中在div

    <BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...

  2. Android进阶(二十二)设置TextView文字水平垂直居中

    设置TextView文字水平垂直居中 有2种方法可以设置TextView文字居中: 一:在xml文件设置:android:gravity="center" 二:在程序中设置:m_T ...

  3. 多行文字的垂直居中或高度不同的图片垂直居中---:after伪类+content

    如何让多行文字垂直居中?或者如何让图片垂直居中? 1.demo--css .box { width: 300px; height: 300px; background-color: #f5e79e; ...

  4. 生成一个水平+垂直居中的div

    这是前端布局经常用到的布局方式,水平垂直居中:面试也经常会问到. 一. 绝对定位实现居中 注意:使用绝对定位布局的时候,外层元素必须也设置有position属性,具体设置为什么值看具体情况.只要不是s ...

  5. 微信小程序文字水平垂直居中对齐问题

    我们知道常用的居中对齐方式有很多种例如: text-align:center; align-items:center; justify-content: center; margin: auto; # ...

  6. DIV文字水平垂直居中的方法

    水平居中 text-align:center 垂直居中(vertical-align) vertical-align:middle; vertical-align时而没效果 然而真实使用的时候,我们会 ...

  7. css 单行图片文字水平垂直居中汇总

    (1) 水平居中 a. 行内元素水平居中 因为img是行内元素(行内块级元素也一样)父级元素设置text-align:center即可,例如: <div style="width: 6 ...

  8. CSS 实现：文字水平垂直居中

    ☊ [实现要求]: <div class="demo1"> 标题1111 </div> √ [实现]: 方案一:普通布局 .demo1 { text-ali ...

  9. 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）

    <div class="demo"><a href="#"><img src="http://nec.netease.c ...

随机推荐

  1. svn文件回滚到某个历史版本号

    转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50819642 本文出自[我是干勾鱼的博客] 有时候想要将svn中的某个文件回滚到 ...

  2. hdu1570(排列和组合公式的应用)

    题意: 给出字符A.则求全排列 A(n,m)=n!/(n-m)! 给出字符C.则求全组合 C(n,m)=n!/(m!*(n-m)!) http://acm.hdu.edu.cn/showproblem ...

  3. 怎样解决jsp:include标签在包括html文件时遇到的乱码问题

    在一个JSP页面中,经常须要包括还有一个文件,JSP为我们提供了jsp:include标签能够完毕这个功能,比方:<jsp:include page="some.jsp"&g ...

  4. hdu 4939

    题意: 长度为n个单位的map,每一个单位须要时间t来走完. 每一个单位能够放置一个塔.一共同拥有三种塔,每种塔的作用不同: 1.仅仅能攻击当前单位.每秒x点伤害(红塔) 2.攻击当前单位之后的全部单 ...

  5. html页面高度自适应

    本文实现的效果是依据浏览器分辨率的不同.页面底端背景色自适应浏览器高度,也就是能够自己主动填充背景色. <script type="text/javascript"> ...

  6. 泛泰A870（高通APQ8064t 600 cpu） Mokee4.4.2（Android4.4） 图赏

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvc3lob3N0/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...

  7. ajaxSetup设置Ajax请求的默认值

    ajaxSetup() 方法为将来的 AJAX 请求设置默认值.语法$.ajaxSetup({name:value, name:value, ... }) 该参数为带有一个或多个名称/值对的 AJAX ...

  8. web前端学习就这9个阶段，你属于哪个阶段？

    第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  9. Android开发之常见事件响应方式

    常见的事件有   (1)单击事件 onClickListener (2)长按事件 onLongClickListener (3)滑动事件 onTouchListener (4)键盘事件 onKeyLi ...

  10. iOS 友盟推送，应用内推送启动图推送闪动黑屏，插屏推送方法报错

    以前都是用的极光推送,应公司需求要求使用友盟推送,为了以后是有分享都适用,,, 友盟推送文档,下载demo 感觉比极光用着要简单顺手 一切就绪后,开始发送消息测试,,,,,搞了半天没有发过来消息 原来 ...