<html>

    <head>

        <meta charset="UTF-8"/>

        <title>div中宽高度自适应文字换行居中demo</title>

    </head>

    <style type="text/css">

        .fatherbox{

            width: 200px;

            height: 300px;

            text-align: center;

            /* start 以下为样式内容，不重要*/

            border: 1px solid red;

            background: green;

            /* end 以上为样式内容，不重要*/

        }

        .childbox1{

            display: inline-block;

            vertical-align: middle;

            /* start 以下为样式内容，不重要*/

            background: blue;

            color: #fff;

            padding: 10px;

            /* end 以上为样式内容，不重要*/

        }

        .childbox2{

            display: inline-block;

            vertical-align: middle;

            height: 100%;

        }

    </style>

    <body>

        <div class="fatherbox">

            <div class="childbox1">

                我是居中内容1<br/>

                我是居中内容1<br/>

                我是居中内容1<br/>

                我是居中内容1

            </div>

            <div class="childbox2"></div>

        </div>

    </body>

</html>

div中宽高度自适应文字换行居中demo实现

我是居中内容1
我是居中内容1
我是居中内容1
我是居中内容1
 

原文出自：https://www.iteye.com/blog/fp-moon-1150774

div中宽高度自适应文字换行居中问题解决的更多相关文章

  1. css实现div中图片高度自适应并与父级div宽度一致

    需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...

  2. div中iframe高度自适应问题

    网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...

  3. JQuery iframe宽高度自适应浏览器窗口大小的解决方法

    iframe宽高度自适应浏览器窗口大小的解决方法   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...

  4. winform中dataGridView高度自适应填充完数据的高度

    // winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度是根据数据的多少而变动. 在load的时候,数据绑定后,加上如下代码: ...

  5. js控制div滚动条，滚动滚动条使div中的元素可见并居中

    1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...

  6. WPF中RichTextBox高度自适应问题解决方法

    最近做一个项目需要用到RichTextBox来显示字符串,但是不允许出现滚动条,在RichTextBox宽度给定的条件下,RichTextBox的高度必须正好显示内容,而不出现下拉滚动条. 这样就要计 ...

  7. 一个position为fixed的div，宽高自适应，怎样让它水平垂直都在窗口居中？

    .div{ position: fixed; left: %; top: %; -webkit-transform: translate(-%, -%); transform: translate(- ...

  8. div中img依据不同分辨率居中显示，超出部分隐藏

    在做banner居中时 碰到的问题,知道可以用背景图实现居中显示,但是内心是想深究下的,故找到几种办法收集一下,后面两种真的是奇技淫巧 来着下面两处 https://www.zhihu.com/que ...

  9. js获取网页中宽高度集合

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

随机推荐

  1. vue路由--使用router.push进行路由跳转

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元 route-link是在html中静态定 ...

  2. ES6 - 基础学习(1): 开发环境搭建

    现在Chrome浏览器已经很好的支持ES6了,但有些低版本的浏览器或其他浏览器还是不支持ES6的语法,因此实际项目开发或上线过程中就需要把ES6的语法转变成ES5的语法.项目开发过程中 Webpack ...

  3. Android中点击按钮获取星级评分条的评分

    场景 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改为Lin ...

  4. AndroidStudio中使用XML和Java代码混合控制UI界面实现QQ相册照片列表页面

    场景 效果 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 新建Androi ...

  5. linux中shell内置命令和外置命令

    shell内置命令 无法通过which或者whereis去查找命令的位置 例如cd,cp这些命令是shell解释器内置的命令 当shell内置命令传入shell解释器,shell解释器通过内核获取相关 ...

  6. hive中parquet存储格式数据类型timestamp的问题

    当存储格式为parquet 且 字段类型为 timestamp 且 数据用hive执行sql写入. 这样的字段在使用impala读取时会少8小时.建议存储为sequence格式或者将字段类型设置为st ...

  7. npm常用命令和脚手架使用

    最近前端同学使用最多的莫过于vue,angualr,react等热门前端框架了.那么就避免不掉的使用npm命令,本人就经常因为这三个脚手架的使用而不得不百度相应的npm命令,不胜其烦,,,因此就整理一 ...

  8. hadoop学习摘要

    参考链接:https://www.zhihu.com/question/333417513 https://www.oschina.net/p/hbase hadoop环境搭建:https://blo ...

  9. JavaScript使用MQTT

    1.MQTT Server使用EMQTTD开源库,自行安装配置: 2.JS使用Websocket连接通信. 3.JS的MQTT库为paho-mqtt,git地址:https://github.com/ ...

  10. Excel_b_1

    1.Excel简介 数据处理软件,lotus兼容(文件,选项,高级,拉到底,lotus,) 2.Excel功能 数据存储,数据处理,数据分析,数据呈现 3.具体功能 重新认识了Excel,选项,高级选 ...