子元素个数不定的垂直居中布局

平时需要‘子元素个数不定的垂直居中’的场景应该不少见吧，像下面这样的效果：

直接上代码：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>demo</title><style type="text/css">/* table-cell方案，完美兼容ie8，考虑ie8的同学可以用 */.article{    width:600px;height:400px;border:1px orange solid;display: table-cell;;         /*最外面层display：table-cell*/vertical-align: middle;}.child{vertical-align: middle;width: 80%; height: 50px; margin: 10px auto;background: pink;}/* flex方案，但是不兼容ie8，移动端放心使用(还是要自己看) */.flex-article {display: flex;flex-direction: column;justify-content: center;align-items: center;width:600px;height:400px;border:1px orange solid;}.flex-child {width: 80%;height: 50px;margin: 10px 0;background: pink;}</style>
</head>
<body>方案一：
<div class="article"><div class="child">1</div><div class="child">2</div><div class="child">3</div><div class="child">4</div>
</div>方案二：
<div class="flex-article"><div class="flex-child">1</div><div class="flex-child">2</div><div class="flex-child">3</div><div class="flex-child">4</div>
</div></body>
</html>

转载于:https://www.cnblogs.com/smalldark/p/7527567.html

子元素个数不定的垂直居中布局相关推荐

html div父集子集,抛砖引玉css系列---根据父元素包含的子元素个数，实现不同的样式...
工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决,不过个人认为用css解决可能更简单一点.这也正好加深了我对css选择器的理解和运用. demo如下: 效果 ...
html获取子节点数量,css判断子元素个数
这次给大家带来css判断子元素个数,css判断子元素个数的注意事项有哪些,下面就是实战案例,一起来看一下. 工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决 ...
css找某个元素的下个子元素,css判断某元素的子元素个数并分别设置样式的方法...
工作时遇到这样一个问题:根据某元素所包含的子元素个数,分别设置不同的样式,这个用js可以解决,不过个人认为用css解决可能更简单一点.这也正好加深了我对css选择器的理解和运用. demo如下: 效果 ...
js 获取子元素个数
// operaColumn 为元素类名 document.querySelector('.operaColumn').childElementCount
子元素自动填充父容器，并且会自动折行- dispaly: grid
很多时候,我们都需要这样的布局父元素宽度是resizable 子元素个数不确定子元素无论都少宽度都可以自动填充父元素当子元素过多时, 子元素可以自动折行每行的子元素宽度一置,都是左对齐如图: ...
JavaScript DOM编程(如何获取HTML标签的父元素和子元素)
今天迎来了我们的JS的第四讲,今天就给家人们浅讲一下如何获取JS中的HTML标签的父元素和子元素,大家有什么不懂的可以私信我或者在下方评论,看到了会回复噢,也希望一直跟着我在学JS的家人们,继续坚持下 ...
jq 获取含类的子集_jquery获取子元素
Jquery获取子元素的方法有2种,分别是children()方法和find()方法. 下面我们分别来使用这两种方法,看看它们有何差异. children()方法:获取该元素下的直接子集元素 find ...
用套路写页面（第二节）不定高边栏，子元素高度动态且相邻联动
目录: 5.左侧边栏(难度:3.5颗星) 5.1.原型分析套路5:当高度/宽度为动态获取,且相邻联动的两个区域 5.2.左边栏上下区域划分套路6:无痕滚动 5.3.按钮的 CSS 5.4.历史记录 ...
html flex布局水平居中,CSS3 Flexbox轻松实现元素的水平居中和垂直居中
网上有不少关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点,而Flex是刚出来不久的东西而已,为了方便说明,遇上新技 ...

子元素个数不定的垂直居中布局

子元素个数不定的垂直居中布局相关推荐

最新文章

热门文章