在CSS中垂直对齐和定位父div

本教程将介绍在CSS中垂直对齐和定位父div的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

在CSS中垂直对齐和定位父div 教程 第1张

问题描述

我对编码相当陌生。我正在制作JS项目时遇到问题。我需要垂直对齐2个父div。这两个父div下面有几个div。因此,为了垂直对齐整个页面,我需要设置这些父div的样式。请帮我做到这一点。如果你知道我的问题的解决方案,请教我怎么移动我的div。

这里是css代码。(如果你想看js和html代码,这里有js小提琴链接:https://jsfiddle.net/y924rv7g/)

body {
 background-image: url(Background.jpeg)
}


/* AGE IN DAYS */
.container-1, .container-2 {
 border: 1px solid;
 margin: 0 auto;
 text-align: center;
 width: 75%;
}

.flex-box-container-1, .flex-box-container-2 {
 display: flex;
 padding: 10px;
 border: 1px solid black; 
 flex-wrap: wrap;
 flex-direction: row;
 justify-content: space-around;
}

.flex-box-container-1 div {
 padding: 10px;
 align-items: center;
 display: flex;
}

#flex-box-result {
 font-size: 32px;
 font-weight: bold;
}


#yikes {
 font-size: 32px;
 font-weight: bold;
 Animation-name: example;
 Animation-duration: 0.5s;
 animation-iteration-count: infinite;;
}

@keyframes example {
 10% {color: red;}
 15% {color: yellow;}
 20% {color: blue;}
 30% {color: green;}
 40% {color: lightsalmon;}
 50% {color: lightsteelblue}
 60% {color: steelblue}
 70% {color: ivory}
 80% {color: purple}
 90% {color: pink}
 100% {color: magenta;}
 }



.flex-box-container-2 img {
 box-shadow: -12px 11px 28px 6px rgba(0,0,0,0.69);
 margin: 10px;
}

推荐答案

在向堆栈溢出发布问题时,请尽量将示例代码保持在最少,以便我们只能集中在必要的部分:)不确定您到底要尝试做什么-您希望对齐什么以及怎么对齐?对于一维样式,请查看flexbox,对于2Dgrid。我建议你浏览这些链接中的一个(可能在你的案例中是Flexbox)并仔细阅读,你的答案很可能就在那里:)

好了关于在CSS中垂直对齐和定位父div的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。