<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. AMD R2600+微星B450迫击炮配置的新工作机，分享给大家

    上个月,突然觉得自己总做用的电脑有点老了,虽然很不舍陪自己战斗了3,4年的老战士,下了很大的决心,才决定搞一台新的吧,虽然新电脑的配置也不算非常高,但是用于开发的话,也算不错的选择了,特此分享一下.又 ...

  2. JavaScript之DOM基础

    概述 DOM(Document Object Model)文档对象模型,针对Html和XML的文档的对象API,是一项 W3C (World Wide Web Consortium) 标准.文档对象模 ...

  3. symfonos2

    0x01 进入网页 啥也没有 0x02 目录爆破 啥也没有 0x03 端口扫描 知识盲区: ProFTPD 1.3.5 用ProFTPD服务权限执行复制命令,默认在'nobody'用户的特权下运行.通 ...

  4. [MongoDB]mongodb的命令行操作

    ./mongo1.查看所有数据库show dbs2.切换数据库use 数据库名3.查询所有集合show collections4.查询所有文档db.文档名.find()db.文档名.find().pr ...

  5. proptypes介绍

    开始 prop-types的主要作用:对props中数据类型进行检测及限制 引用方法:import PropTypes from 'prop-types' 用法: // 基本用法 用来检测数据类型 c ...

  6. 关于apt-get remove 与 apt-get purge

    今天在Ubuntu服务器上安装supervisor,部署没成功想卸载重来,sudo apt-get remove supervisor 后发现配置文件还在,便手动删除了配置文件.再次安装,提示配置文件 ...

  7. SSH-Secure-Shell 3.2.9 build283版本,创建直接打开文件传输的快捷方式的方法

    2019-12-31 16:21:23 版本信息: 在安装目录下新建快捷方式 目标填写:"D:\SSH-Secure-Shell\SshClient.exe" /f 图标选择,系统 ...

  8. MySQL 8 拷贝MySQL数据库到另一台机器

    通过mysqldump生成包含SQL语句的文件,然后将其应用到目标机器的mysql客户端程序. mysqldump --help 可以获取mysqldump选项以及用法. 如果源服务器上启用了GTID ...

  9. hash类型的应用场景 —— Redis实战经验

    hash类型是一个string类型的field和value的映射表,每个 hash 可以存储 232 - 1 键值对(40多亿),hash类型主要有以下应用场景. 1. 购物车 以用户id为key,商 ...

  10. C# MVC 全局错误Application_Error中处理（包括Ajax请求）

    在MVC的Global.asax Application_Error 中处理全局错误. 如果在未到创建请求对象时报错,此时 Context.Handler == null . 判断为Ajax请求时,我 ...