要实现如图一所示的结果：

html代码如下：

<!DOCTYPE html>

<html>

<head lang="zh">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta charset="utf-8" />

    <title>商品管理后台首页</title>

    <link rel="stylesheet" href="./css/index.css" />

</head>

<body>

    <div class="content">

        <span>这是一个测试要居中</span>

        <div class="box">我是div中的文字</div>

    </div>

</body>

</html>

相应的less代码

.content{

    width: 500px;

    height: 200px;

    border:1px solid red;

    position: relative;

    line-height: 200px;/*让class=content父div中的文字垂直居中*/

    span{

        background: green;

    }

    .box{

        background: yellow;

        float: left;

        width: 200px;

        height: 100px;

        line-height: 100px;/*让黄色div中的文字内容垂直居中*/

        text-align: center;/*让文字水平居中*/

        position: absolute;

        top:50%;

        margin-top: -50px;

        margin-left: 200px;

    }

}

②使用vertical-align:middle设置在父元素中的位置，

效果图：

html代码：

<!DOCTYPE html>

<html>

<head lang="zh">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta charset="utf-8" />

    <title>商品管理后台首页</title>

    <link rel="stylesheet" href="./css/index.css" />

</head>

<body>

    <div class="content">

        我是div中的文字<div class="pox">我是子元素的文字</div>

    </div>

</body>

</html>

相应的css代码：

.content{

    width: 500px;

    height: 200px;

    line-height: 200px;/*设置其文字内容垂直居中*/

    border:1px solid red;

    .pox{

        background: yellow;

        width: 200px;

        height: 70px;

        display: inline-block; /*一定要将div设置为inline-block*/

        vertical-align: middle;/*设置该元素在父元素中的位置*/

        line-height: 70px;

        border: 1px solid green;

        text-align: center;

    }

}

化简后的核心代码：

.content{

    width: 500px;

    height: 200px;

    line-height: 200px;/*设置其文字内容垂直居中*/

    background:red;

    .pox{

        height: 70px;/*给内部div设置了高度，该div才会垂直居中*/

         display: inline-block; /*一定要将div设置为inline-block*/

        vertical-align: middle;/*设置该元素在父元素中的位置*/

        background: yellow;

    }

}

在div中设置文字与内部div垂直居中的更多相关文章

  1. 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中

    效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...

  2. div中单行文字垂直水平居中

    1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...

  3. 大div中，三个小div水平居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JavaScript设置div中的文字滚动起来 实现滚动效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 禁止鼠标多次点击选中div中的文字

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>Fire ...

  6. div中让文字垂直居中

    在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...

  7. 如何让div中的文字只显示一行，多余的文字隐藏并加上省略号（超链接形式）

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

  8. css之div中纯文字单行和多行垂直居中

    先上效果图 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  9. div中设置滚动条的问题

    <div srtle="width:100px;height:50px;"></div> 这样的一个div,当文本超出的时候我们就会设: overflow: ...

随机推荐

  1. (转)JSON数据格式和js操作json总结

    原:http://niutuku.com/tech/javaScript/273643.shtml JSON数据格式和js操作json总结 来源:niutuku.com |         vince ...

  2. IOS之Core Foundation框架和Cocoa Foundation框架的区别

    Core Foundation框架 (CoreFoundation.framework) 是一组C语言接口,它们为iOS应用程序提供基本数据管理和服务功能.下面列举该框架支持进行管理的数据以及可提供的 ...

  3. Interview----First single charactor

    题目:在一个字符串中找到第一个只出现一次的字符.如输入 abaccdeff,则输出 b. 分析:这道题是 2006 年 google 的一道笔试题. 分析: 用 Hash, 时间和空间复杂度是 O(N ...

  4. Spring注解和配置方式

    Spring提供了一个org.springframework.beans.factory.FactoryBean工厂类接口,用户可以通过实现该接口定制实例化Bean的逻辑. 从Spring3.0开始, ...

  5. Java 集合深入理解（11）：LinkedList

    点击查看 Java 集合框架深入理解 系列, - ( ゜- ゜)つロ 乾杯~ 今天心情鱼肚白,来学学 LinkedList 吧! 日常开发中,保存一组数据使用的最多的就是 ArrayList, 其次就 ...

  6. HDU 4869 (递推 组合数取模）

    Problem Turn the pokers (HDU 4869) 题目大意 有m张牌,全为正面朝上.进行n次操作,每次可以将任意ai张反面,询问n次操作可能的状态数. 解题分析 记正面朝上为1,朝 ...

  7. Quirks模式是什么？

    什么是DOCTYPE: DOCTYPE,或者称为 Document Type Declaration(文档类型声明,缩写 DTD).通常情况下,DOCTYPE 位于一个 HTML 文档的最前面的 位置 ...

  8. Nginx工作原理和优化

    转自:http://blog.csdn.net/hguisu/article/details/8930668 Nginx由内核和模块组成,其中,内核的设计非常微小和简洁,完成的工作也非常简单,仅仅通过 ...

  9. 互联网保险O2O平台微服务架构设计(转)

    非常感谢http://www.cnblogs.com/skyblog/p/5044486.html 关于架构,笔者认为并不是越复杂越好,而是相反,简单就是硬道理也提现在这里.这也是微服务能够流行的原因 ...

  10. 【转】C++析构函数为什么要为虚函数

    注:本文内容来源于zhice163博文,感谢作者的整理. 1.为什么基类的析构函数是虚函数? 在实现多态时,当用基类操作派生类,在析构时防止只析构基类而不析构派生类的状况发生. 下面转自网络:源地址  ...