div中宽高度自适应文字换行居中问题解决
<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
原文出自：https://www.iteye.com/blog/fp-moon-1150774
div中宽高度自适应文字换行居中问题解决的更多相关文章
- css实现div中图片高度自适应并与父级div宽度一致
需求:1.父级div不设置高度 2.图片高度自适应,并且显示为正方形: 以前遇到列表中图片高度必须和父级宽度相同,并且需要为正方形的时候,最开始的方法是定死图片高度,这样会导致不同分辨率下图片会压缩, ...
- div中iframe高度自适应问题
网页分为上.中.下三部分,上.下高度固定中间高度自适应:中间分为左.右两部分,左边宽度固定,右边宽度自适应.现在右侧div是宽度和高度都是自适应,右侧div里有个IFrame,想让IFrame自适应外 ...
- JQuery iframe宽高度自适应浏览器窗口大小的解决方法
iframe宽高度自适应浏览器窗口大小的解决方法 by:授客 QQ:1033553122 1. 测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...
- winform中dataGridView高度自适应填充完数据的高度
// winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度是根据数据的多少而变动. 在load的时候,数据绑定后,加上如下代码: ...
- js控制div滚动条，滚动滚动条使div中的元素可见并居中
1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...
- WPF中RichTextBox高度自适应问题解决方法
最近做一个项目需要用到RichTextBox来显示字符串,但是不允许出现滚动条,在RichTextBox宽度给定的条件下,RichTextBox的高度必须正好显示内容,而不出现下拉滚动条. 这样就要计 ...
- 一个position为fixed的div，宽高自适应，怎样让它水平垂直都在窗口居中？
.div{ position: fixed; left: %; top: %; -webkit-transform: translate(-%, -%); transform: translate(- ...
- div中img依据不同分辨率居中显示，超出部分隐藏
在做banner居中时 碰到的问题,知道可以用背景图实现居中显示,但是内心是想深究下的,故找到几种办法收集一下,后面两种真的是奇技淫巧 来着下面两处 https://www.zhihu.com/que ...
- js获取网页中宽高度集合
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
随机推荐
- k8s调度器kube-scheduler
kube-scheduler简介 调度是容器编排的重要环节,需要经过严格的监控和控制,现实生产通常对调度有各类限制,譬如某些服务必须在业务独享的机器上运行,或者从灾备的角度考虑尽量把服务调度到不同机器 ...
- JWT实现token-based会话管理（转）
JWT实现token-based会话管理 阅读目录 认识JWT demo要点说明 小结 上文<3种web会话管理的方式>介绍了3种会话管理的方式,其中token-based的方式有必要 ...
- 5G和AI会碰撞出什么样的火花呢？
本文学习和分享一篇综述文章,这篇文章是东南大学移动通信国家重点实验室主任.长江学者特聘教授尤肖虎教授2019年发表在<中国科学 信息科学>(<SCIENCE CHINA Inform ...
- CommunityServer的编译
1. 简介 Community Server是一个免费的开源协作系统,用于管理文档.项目.客户关系和电子邮件通信,可以在私有服务器上安装和配置.它的组成分为: 1. OnlyOfficeJabber ...
- Sunset-Sunrise: Vulnhub Walkthrough
靶机链接: https://www.vulnhub.com/entry/sunset-sunrise,406/ 主机扫描: 端口扫描: HTTP 80 目录枚举未果 HTTP 8080 Google ...
- SAP MM 采购订单与相关合同的价格差异问题分析
SAP MM 采购订单与相关合同的价格差异问题分析 笔者所在的项目里,一般生产性物料PO的价格是来自于合同价格的,而合同的价格来自于采购信息记录的价格,业务部门不允许PO里随便改价格的. 但是业务部门 ...
- 全面解析百度大脑发布“AI开发者‘战疫’守护计划”
即日起,百度大脑发布“AI开发者战疫守护计划” 大疫当前,人人有责,携手开发者共同出击抗击疫情 基于百度大脑AI开放平台和飞桨深度学习平台,积极运用算法.算力.软件等“武器”助力抗疫! 谁能参与计 ...
- MySQL服务器的运维与优化
MySQL运维 安装数据库 配置本地yum源,将gpmall-repo文件上传至/opt目录 创建yum.repo文件 安装mariadb服务 # yum install -y mariadb mar ...
- C#中的WinFrom技术实现串口通讯助手(附源码)
C#中的WinFrom技术实现串口通讯助手(附源码) 实现的功能: 1.实现自动加载可用串口. 2.打开串口,并且使用C#状态栏显示串口的状态. 3.实现了串口的接收数据和发送数据功能. 4.串口 ...
- HTML连载67-手风琴效果、2D转换模块
一.手风琴效果 <style> *{ margin:0; padding:0; } ul{ width: 960px; height: 300px; margin:100px auto; ...