<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. Nexus 安装

    Windows下安装Nexus OSS 3.12.1 1. Nexus 下载 到sonatype官网下载开源免费的OSS版本.OSS即为Open Source Software. 下载地址:https ...

  2. springboot 基于Tomcate的自启动流程

    Springboot 内置了Tomcat的容器,我们今天来说一下Springboot的自启动流程. 一.Spring通过注解导入Bean大体可分为四种方式,我们主要来说以下Import的两种实现方法: ...

  3. CSS选择器有哪些?选择器的优先级如何排序?

    CSS选择器分类: CSS的选择器分类可以分为三大类:id选择器,类选择器,标签选择器. 用法如下: 选择器   e.g. 说明 id选择器 #id #header 选择id="header ...

  4. Git push时不需要总输入密码

    遇到问题: 最近因为换了自己的邮箱密码后,每次push的时候都需要填写密码,账号.很烦 解决方法: [戎马半生的答案] (http://www.cnblogs.com/zhaoyu1995/p/650 ...

  5. Centos7 安装Python3.7

    如果电脑自带的python2.7 先卸载 1.强制删除已安装python及其关联 rpm -qa|grep python|xargs rpm -ev --allmatches --nodeps 2.删 ...

  6. centos tomcat解压版安装

    解压: tar -xzvf apache-tomcat-8.5.23.tar.gz -C /usr/local/java 配置Tomcat的环境变量: export CATALINA_HOME=/us ...

  7. 广度优先搜索BFS---求出矩阵中“块”的个数

    题目: 给出一个 m x n 的矩阵,矩阵中的元素为0或1.如果矩阵中有若干个 1是相邻的,那么称这些1构成了一个“块”.求给定的矩阵中“块”的个数. 0 1 1 1 0 0 1 0 0 1 0 0 ...

  8. EasyUI笔记(五)表单

    本系列只列出一些常用的属性.事件或方法,具体完整知识请查看API文档 Form(表单) 创建一个简单的HTML表单.构建一个包含id.action和method值的表单元素. <form id= ...

  9. equals和==的使用

    1.equals的使用: 引用数据类型的比较:通常情况下比较的是引用数据类型下的栈中的地址,但当你重写了equals方法后就不一定了 User user1=new User("tom&quo ...

  10. Fight Against Monsters Gym - 102222H【贪心】

    贪心的策略 #include <bits/stdc++.h> using namespace std; ; typedef long long ll; struct m { int hp, ...