<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. SAP GUI 750 安装包 及 补丁3 共享

    SAP GUI 750 安装包 及 补丁3 共享 链接: https://pan.baidu.com/s/1hstkfUs%20 密码: ggbz -------------------------- ...

  2. POJ 1849 Two(树的直径--树形DP)（好题）

    大致题意:在某个点派出两个点去遍历全部的边,花费为边的权值,求最少的花费 思路:这题关键好在这个模型和最长路模型之间的转换.能够转换得到,全部边遍历了两遍的总花费减去最长路的花费就是本题的答案,要思考 ...

  3. 注册Azure AD 2.0 应用程序

    作者:陈希章 发表于 2017年3月22日 上一篇 介绍了Microsoft Graph应用程序的一些概念,以及目前还比较普遍的Azure AD 1.0应用程序的注册方式.但正如我多次提到的那样,虽然 ...

  4. bandit_pass

    boJ9jbbUNNfktd78OOpsqOltutMc3MY1CV1DtqXWVFXTvM2F0k09SHz0YwRINYA9UmHadQclWmgdLOKQ3YNgjWxGoRMb5luKpIwr ...

  5. 工作随笔——ember框架去除url上的#号

    因为工作原因,接触到了一套非常好的前端框架--ember. ember框架高度封装,学习曲线比较陡峭. ember对于url更新的配置在config/environment.js >> l ...

  6. Struts配置详解

    一.Stuts的元素 1 web.xml 任何一个web应用程序都是基于请求响应模式进行构建的,所以无论采用哪种MVC框架,都离不开web.xml文件的配置.换句话说,web.xml并不是Struts ...

  7. Git安装和使用（谨记）

    刚开始用git的小白适用,,转自http://www.cnblogs.com/qijunjun/p/7137207.html 实际项目开发中,我们经常会用一些版本控制器来托管自己的代码,今天就来总结下 ...

  8. bzoj 4012: [HNOI2015]开店 主席树

    Description 风见幽香有一个好朋友叫八云紫,她们经常一起看星星看月亮从诗词歌赋谈到 人生哲学.最近她们灵机一动,打算在幻想乡开一家小店来做生意赚点钱.这样的 想法当然非常好啦,但是她们也发现 ...

  9. Fragment生命周期及实现点击导航图片切换fragment，Demo

    PS:Fragment简介 Fragment是Android3.0后引入的一个新的API,他出现的初衷是为了适应大屏幕的平板电脑, 当然现在他仍然是平板APP UI设计的宠儿,而且我们普通手机开发也会 ...

  10. 在海航云中部署 keepalived

    **本文属自我学习,不适合转载** 1. 准备工作 1.1 网络方面的准备工作 1.1.1 创建安全组 注意这里要添加 vrrp 协议支持,否则 keepalived 将无法正常工作. 1.1.2 创 ...