如何让div内的多行文本上下左右居中
1、首先，如果div中的文本特别少，不超过div宽度，那么这种就非常简单了，直接line-height等于height就可以了
<style type="text/css">
#one{
width: 200px;
height: 200px;
line-height: 200px;
background: #FF9999;
text-align: center;
}
</style>
<div id="one">
我是内容
</div>
2、但是，在文本好多情况下，那么就会出现这种情况
GG了，如果div不是固定高度，使用padding是可以完美实现
<style type="text/css">
#one{
width: 200px;
padding: 100px 0;
background: #FF9999;
text-align: center; }
</style>
</head>
<body>
<div id="one">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
</body>
3、2的前提是div不是定高的，但是在很多情况下，我们需要的div是需要定高的，
CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用，但是在CSS中还有一个display
属性能够模拟<table>，所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意，display:table和
display:table-cell的使用方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要定位的文本再增加一个<div>元素：
<style type="text/css">
.wrap{
display: table;
}
#one{
width: 200px;
height: 200px;
display: table-cell;
background: #FF9999;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="wrap">
<div id="one">
我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
</div>
</body>
如何让div内的多行文本上下左右居中的更多相关文章
- css选择器（选择<div>内所有<p>元素）
情况1:<div><p></div> 情况2:<div><a><p></p></a></div&g ...
- div内嵌p,div等块元素出现的问题
div内嵌p,div等块元素出现的问题 http://caiceclb.iteye.com/blog/428085 div内部块级元素,比如p,div,设置外间距(margin)的话会怎样.本来还纳闷 ...
- All about Div内显示滚动桥
Div内显示滚动桥看似是一个简单的前端问题,然而实际会发现还是有挺多需要注意的, 本文尝试对div内显示滚动桥的各种主要实现及一些难题进行研究. 横向滚动桥 横向滚动桥比较简单,无需设置宽度,直接ov ...
- CSS div内文字显示两行，超出部分省略号显示
1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...
- CSS——div垂直居中及div内文字垂直居中
最近做demo时,经常需要div垂直居中或者让div内文字相对div垂直居中.水平居中比较简单,就不多说了,这里主要记录一下垂直居中的一些方法. 一.div垂直居中的一些方法: 1.当height.w ...
- css实现div内一段文本的两端对齐
在一个固定宽度的div内,使得P标签内的文本两端对齐: text-align: justify;text-justify:inter-ideograph; <!DOCTYPE html> ...
- div 内 图片 垂直居中
vertical-align属性适用于 line-block: <div class="title"> <img src="img_p1_title.p ...
- 禁止选择DIV内的文本(css,js写法)
css:<span style="font-family:SimSun;font-size:18px;">/* 禁止选择div内的文字 */ #hall_body { ...
- div内元素的居中
1.如果是一行文字(不超过一行) parent{ text-align:center; line-height:div高度; } 2.如果是div内其他类型元素 parent{ height:xxxp ...
随机推荐
- 记忆（缓存）函数返回值：Python 实现
对于经常调用的函数,特别是递归函数或计算密集的函数,记忆(缓存)返回值可以显着提高性能.而在 Python 里,可以使用字典来完成. 例子:斐波那契数列 下面这个计算斐波那契数列的函数 fib() 具 ...
- js过滤html标签
function deleteHtmlTag(str){ str = str.replace(/<[^>]+>|&[^>]+;/g,"").trim ...
- pycharm的list的应用
li = [11,22,22,33,44] v = li.count(22) print (v) #输出结果2 #计算元素的次数 count的应用 li = [11,22,33,22,44] li.e ...
- 2019 蓝桥杯省赛 A 组模拟赛（一）-忽明忽暗
走廊里有 nn 盏灯,编号依次为 1,2,3,...,n,由学校电路控制中心管理.初始时,所有灯都是关闭的.某黑客入侵了学校电路控制中心,黑客想让灯忽明忽暗,进行了 n 轮操作.第 i 轮操作,会让所 ...
- Little Sub and Isomorphism Sequences ZOJ - 4089
ZOJ - 4089 思路:可以反正 最长重构序列必然符合 此模式 x + { } 与 { } + x 那么 题意转化为了 找两个距离最长的相同的数.eeee 先离散化 然后 ...
- Nvidia的CUDA库现在恢复使用了
Nvidia的CUDA库现在恢复使用了 由于早期版本存在兼容问题,从去年8月nvidia-cuda-toolkit包被移除了.现在该软件包更新后,又重新可以用,被重新添加到Kali Linux软件 ...
- mysql 8.0 密码加密方式的坑
问题:新安装好MySQL 8.0和Navicat之后,连接时总是报: 1251 Client does not support authentication protocol requested by ...
- 变量前缀__device__以及__managed__
1.__device__ 作为变量前缀时,__device__限定符声明位于设备上的变量.如果此限定符单独使用,则变量具有以下特征: a.位于全局存储器空间中: b.与应用程序具有相同的生命周期: 可 ...
- LOJ.6060.[2017山东一轮集训Day1/SDWC2018Day1]Set(线性基)
LOJ BZOJ 明明做过一道(最初思路)比较类似的题啊,怎么还是一点思路没有. 记所有元素的异或和为\(s\),那么\(x_1+x_2=x_1+x_1\ ^{\wedge}s\). \(s\)是确定 ...
- 2018-2019-2 网络对抗技术 20162329 Exp3 免杀原理与实践
目录 免杀原理与实践 一.基础问题回答 1.杀软是如何检测出恶意代码的? 2.免杀是做什么? 3.免杀的基本方法有哪些? 二.实验内容 1. 正确使用msf编码器 2. msfvenom生成如jar之 ...