div中的“内容”水平垂直居中
1. div高度自适应的情况
div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的,
想要看的更直观些,只需要加上padding元素,内容四周便会留下空白,实现水平垂直居中的效果
.demo{
width: 200px;
border: 1px solid red;
padding: 20px;
}
<div class="demo">
this is a test of margin
this is a test of margin
this is a test of margin
this is a test of margin
this is a test of margin
</div>
2.div设置具体高度
(1)内容只有一行
设置div的line-height和div的高度一样即可,这个大家都知道哒
(2)内容不确定有几行
这时候需要在div中再加一层结构,用p标签或者div都可以
*方法一:
.demo{
position: absolute;
width: 200px;
height: 200px;
border: 1px solid red;
}
p{
position: absolute;
width: 150px;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
border: 1px solid black;
}
<div class="demo">
<p>
this is a test of margin
this is a test of margin
this is a test of margin
this is a test of margin
</p>
</div>
*方法二:若是不想用position:absolute这样的脱离文档流的样式,那就可以尝试模拟表格的方法设置父元素display:table,设置子元素display:table-cell,并设置vertical-align:middle即可
.demo{
width: 200px;
height: 200px;
display: table;
border: 1px solid red;
}
p{
display: table-cell;
vertical-align: middle;
text-align: center;
border: 1px solid black;
}
<div class="demo">
<p>
this is a test of margin
this is a test of margin
this is a test of margin
this is a test of margin
</p>
</div>
此时子元素设置宽度是没用的,宽度始终和父元素一致;
但是如果子元素设置高度的话,若是高度小于父元素则无效果,若是高度大于父元素则父元素的高度也相应增加到和子元素一样的高度
*方法三:使用css3新增的flex布局完成,设置父元素display:box; box-pack:center; box-orient:vertical;即可,记得要在前面加上浏览器前缀哦
.box{
width: 200px;
height: 200px;
border: 1px solid red;
display: box;
box-pack:center;
box-orient:vertical;
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-orient:vertical;
}
<div class="box">
<div>
this is a test
this is a test
this is a test
</div>
<div>
this is another test for the second div
</div>
</div>
div中的“内容”水平垂直居中的更多相关文章
- div中的内容水平垂直居中
1. div高度自适应的情况 div在不设置高度的时候,会被里面的内容撑开,内容自动填充在div中,无论是一行内容还是多行内容,此时不需要设置垂直居中,内容自动在中间的, 想要看的更直观些,只需要加上 ...
- 让DIV中的内容水平和垂直居中
让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的.(页面设置height:100%;是无效的),这 ...
- [转]如何让div中的内容垂直居中
转自:http://blog.163.com/yan_1990/blog/static/197805107201211311515454/ 虽然Div布局已经基本上取代了表格布局,但表格布局和Div布 ...
- 如何让div中的内容垂直居中
虽然Div布局已经基本上取代了表格布局,但表格布局和Div布局仍然各有千秋,互有长处.比如表格布局中的垂直居中就是Div布局的一大弱项,不过好在千变万化的CSS可以灵活运用,可以制作出准垂直居中效果, ...
- div中的内容居中
要使div中的内容居中显示,不仅div要设定“text-align:centr" ,内置对象要添加margin:auto;属性才能使其在firefox等其他浏览器中也能居中.
- div中让内容能不换行就尽量不换行.【纯原】
div中让内容能不换行就尽量不换行,部分左对齐,部分右对齐. <html> <head> <title>九歌·少司命</title> <style ...
- 怎样推断DIV中的内容为空
怎样推断DIV中的内容为空 1.问题背景 推断div内部是否为空.假设为空,给出无数据提示:否则显示正常页面 2.设计源代码 <!DOCTYPE html PUBLIC "-//W3C ...
- div中的内容垂直居中的五种方法
一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
- html中div使用CSS实现水平/垂直居中的多种方式
CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码 配合在线预览,效果更佳 以下例子中,涉及到的CSS属性值. .parent-frame ...
随机推荐
- hyper-v显示分辨率如何自动调整
打开文件/etc/default/grub 找到GRUB_CMDLINE_LINUX_DEFAULT所在行,在最后加上 video=hyperv_fb:[分辨率],比如我想要的分辨率是1600×900 ...
- Xamarin.FormsShell基础教程(2)创建Shell解决方案
Xamarin.FormsShell基础教程(2)创建Shell解决方案 创建Shell解决方案 在开发Shell的应用程序时,首先需要创建一个Shell解决方案,其具体操作步骤如下: (1)在VS的 ...
- odoo开发学习「目录」
目录: 一.odoo介绍(发源 版本 ERP对比 优势劣势 应用场景 发展情况 社区介绍) 二.odoo设计思想 三.odoo自带模块 四.odoo开发前准备(python基础) 五.odoo环境搭建 ...
- TrueType字体
TrueType字形描述技术和TTF文件 TrueType字体技术的研究分析与应用 看起来上面两篇都是翻译的文档. 看微软的原文介绍: TrueType fundamentals 其他文章: 获取Tr ...
- 两分钟观看 nodejs、 iojs、 npmjs 之间的狗血剧情
开门大吉,欢迎光临.这是 乐玩nodejs npm工具库 微信公众号的第一篇文章,那就先来说说 nodejs/npm 的小秘密,话不多说,赶快开始: 通过一个时间线简要描述下 2008 年 V8 引擎 ...
- github 体积限制
github 体积限制 仅供了解,切勿滥用.希望自觉维护良好社区. 单文件 单个文件大于 50M 时会收到警告, 100M 时会被拒绝. 该警告将告诉您哪些文件太大: remote: warning: ...
- Python原生调试工具pdb实践小结
使用python -m pdb xxx.py进入单步调试模式,默认会在脚本的第一行可执行命令处停止.此时,通过 b function设置之后的函数断点会提示出错,从出错异常栈中可以看出,pdb是将fu ...
- java 迭代的陷阱
/** * 关于迭代器,有一种常见的误用,就是在迭代的中间调用容器的删除方法. * 但运行时会抛出异常:java.util.ConcurrentModificationException * * 发生 ...
- vSphere SDK for Java - 为虚拟机添加磁盘
示例代码: import com.vmware.vim25.*; import com.vmware.vim25.mo.*; import org.springframework.stereotype ...
- js生成条形码——JsBarcode
原文地址:https://www.cnblogs.com/huangenai/p/6347607.html 介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE12 ...