<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. docker：搭建ELK 开源日志分析系统

    ELK 是由三部分组成的一套日志分析系统, Elasticsearch: 基于json分析搜索引擎,Elasticsearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片 ...

  2. PWA 学习笔记

    深入学习网址:https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps 一. 基本介绍 1. 渐进式:适用所有浏览器,因为它是 ...

  3. 珠峰-webpack1

    #### sourcemap #### watch 选项 #### 3个常用的小插件. #### 前端webpack的自己的mock #### 服务端引用了webpack的插件. #### resol ...

  4. bootstrap的自适应 和细节点

    bootstrap的自适应尽量少用绝对宽度px来定义大小,这会导致缩小屏幕宽度时相冲突,多使用百分比来改变位置.. 遇到不能用margin和padding来改变位置时,首先应该想到绝对定位和相对定位( ...

  5. Blazui 常见问题：我更新了数据，为什么界面没刷新？

    首发于:http://www.blazor.group:8000/topic/reply?tpid=9 开门见山,不介绍,不废话 建议食用本文前先食用 https://www.cnblogs.com/ ...

  6. JavaScript的算数,赋值,比较和逻辑运算符

    类似a=1+1这样的表达式称为运算符,js的运算符分为算数,赋值,比较和逻辑运算符:常见的算数有:+ - * / %(加减乘除,取模),比方说5/4=4*1+1:5%4=1,js算数顺序:从左往右,先 ...

  7. Android中使用getDrawable时提示:Call requires API level 21(current min is 15)

    场景 在通过getDrawable方法获取照片资源时提示: Call requires API level 21(current min is 15) 注: 博客: https://blog.csdn ...

  8. Java架构师必看，超详细的架构师知识点分享！

    在Java程序员行业中,有不少Java开发人员的理想是成为一名优秀的Java架构师,Java架构师的主要任务不是从事具体的软件程序的编写,而是从事更高层次的开发构架工作.他必须对开发技术非常了解,并且 ...

  9. Elasticsearch编程操作

    1.创建工程导入依赖 <dependency> <groupId>org.elasticsearch</groupId> <artifactId>ela ...

  10. jmeter请求参数的两种方式

    Jmeter做接口测试,Body与Parameters的选取 1.普通的post请求和上传接口,选择Parameters. 2.json和xml请求接口,选择Body. 注意: 在做接口测试时注意下请 ...