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

Vertically Aligning and Positioning Parent DIVs in CSS(在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)并仔细阅读，你的答案很可能就在那里：)

这篇关于在CSS中垂直对齐和定位父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！