在CSS中垂直对齐和定位父div
我对编码相当陌生。我正在制作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)并仔细阅读,你的答案很可能就在那里:)
相关文章