html中元素盒子垂直居中的实现方法

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>元素盒子垂直居中的实现方法</title>
<style type="text/css">
#parent {width:500px;height:500px;background-color:#188eee;
display: table;}
#child {width:100px;height:auto;max-height:200px;overflow-y:scroll;display: table-cell;vertical-align: middle;
}
#child text{display:block;width:80%;margin-left:10%;height:40px;line-height:40px;background-color:#fff;text-align:center;border-bottom:1px #f1f1f1 solid;
}
#child text:last-child{border-bottom:0px;
}
</style>
</head><body>
<div id="parent"><div id="child"><text>111</text><text>222</text><text>333</text><text>444</text><text>555</text></div>
</div></body>
</html>

html中元素盒子垂直居中的实现方法相关推荐

html中元素居中的五种方法
在网页开发中,经常会有嵌套元素中将子元素居中的要求.下边将五种常用的居中方法进行总结. 1:原始图(父子元素无border,无padding): 2:实现居中效果: 一:使用margin进行固定长度的 ...
js中元素样式设置的六种方法
元素的样式设置六种方法 1.对象.style 2.对象.className 3.对象.setAttribute("style") 4.对象.setAttribute("c ...
CSS实现元素水平垂直居中的各种方法
关于 CSS 如何将元素进行水平垂直居中的几种常用方法前言在设计网页页面的过程中,总会有将元素或者文字进行水平或者垂直居中的要求,各种CSS样式调整,搞的头都大了.这里将会介绍 CSS 中几种常用 ...
【Python教程】统计序列中元素出现频度的详细方法
例1:从随机列表中,找到找到出现次数最高的3个元素,及出现次数方法一: from random import randint date = [randint(0, 20) for _ in rang ...
Java求两集合中元素交集的四种方法对比总结
hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 最近在做项目的时候有用到对两个集合中的元素进行对比求其交集的情况,因为涉及到的数据量比较大,所以在进行求两个集合中元素交集的时候,就应该考虑 ...
使元素水平垂直居中的实现方法
方案一: 知晓元素的宽高的情况下,可以使用: div{position:absolute;left:50%;top:50%;margin-top:0.5*height;margin-left:0.5* ...
Revit中元素重要的属性和方法
Category(类别),Location(位置),LevelId(标高), GroupId(组),Id,UniqueId(唯一Id)等都是元素的几个重要属性. 重要的方法:GetMaterials( ...
python替换列表中元素_python中关于元素替换的一些总结
python中元素进行替换有很多方法,下面是我学习中的一些总结 1.字符串替换str.replace()方法 python中的replace()方法是把字符串中的old字符串替换成new的字符串,如果 ...
如何将div中的内容垂直居中
如何将div中的内容垂直居中第一种方法: 在div里面添加:text-align:center; line-height: 60px; 这里的line-height是行高,这个根据你的div的高度要 ...

html中元素盒子垂直居中的实现方法

html中元素盒子垂直居中的实现方法相关推荐

最新文章

热门文章