Question

我很难垂直居中我的积木。如果您查看我的代码，test1块与块catA catB catE catF对齐，但test2块与其各自的顶部块不对齐。

html：

<div class="homepage-wrapper">
    <div class="homepage-top-category-container">
        <div class="homepage-top-category-container-title">
            <span id="homepage-top-category-container-title">Most popular aisles</span>
        </div>
        <div class="homepage-top-category-container-list">
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catA
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catB
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catC
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catD
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catE
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catF
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catG
                        </div>
                    </div>
                </a>
            </div>
            <div>
                <a href="#">
                    <div class="homepage-top-category-container-item" id="homepage-top-category-container-item">
                        <div class="homepage-top-category-container-item-btn">
                            Browse catH
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="homepage-banner-grid-wrapper">

    <div class="homepage-banner-grid">

        <div class="home-page-banner-grid-items" id="home-page-banner-grid-item">
            test1
        </div>

        <div class="home-page-banner-grid-items" id="home-page-banner-grid-item">
            test2
        </div>

        <!--<div class="home-page-banner-grid-items" id="home-page-banner-grid-item3">*******
            test3
        </div>
    </div>****** -->

</div>

css：

a {
    text-decoration: none;
}
body {
    margin: 0px;
}
.homepage-wrapper {
    max-width: 1078px;
    margin-left: auto;
    margin-right: auto;
}
.homepage-top-category-container-title {
    color: #808080;
    margin-top: 15px;
    padding: 15px 0 15px 0;
    font-weight: bold;
    letter-spacing: -1px;
}
#homepage-top-category-container-title {
    color: ##808080;
    margin-left: 22px;
}
.homepage-top-category-container-list {
    display: flex;
    flex-wrap: wrap;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.homepage-top-category-container-list > div {
    margin-left: 22px;
    margin-bottom: 22px;
}
.homepage-top-category-container-item {
    display: block;
    float: none;
    width: auto;
    height: auto;
    border: solid 1px #d0d0ce;
    position: relative;
    border-radius: 3px;
}
#homepage-top-category-container-item {
    width: 240px;
    height: 360px;
}
.homepage-top-category-container-item:hover {
    -webkit-box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
    -moz-box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
    box-shadow: 0px 5px 15px 0px rgba(162, 162, 162, 1);
}
.homepage-top-category-container-item-btn {
    background-color: #cde5d9;
    color: black;
    position: absolute;
    padding: 10px;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid #d0d0ce;
    border-bottom: 2px solid #d0d0ce;
}
.homepage-banner-grid-wrapper {
    background-color: yellow;
    width: 100%;
    height: auto;
}
.homepage-banner-grid {
    max-width: 1078px;
    height: auto;
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

.home-page-banner-grid-items {
    width: 506px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#home-page-banner-grid-item {
    background-color: red;
    margin-left: 22px;
/*
#home-page-banner-grid-item1 {
    background-color: red;
}
#home-page-banner-grid-item2 {
    background-color: green;
}
#home-page-banner-grid-item3 {
    background-color: orange;
}
*/

我的目标是在各自的块下对齐test2块，因此它看起来就像test1块在各自块下的对齐方式。

我将感谢我的代码的一些更正和/或增强。

jsfiddle here - ＆gt; https://jsfiddle.net/r0gLo9cp/

非常感谢你的帮助。

Answer 1

你错过了底部的结束div吗？看起来像flex应该照顾你的居中，如果你想要将它们列在一个列中，请确保在父容器（flex-direction: column;）中使用homepage-banner-grid。

Answer 2

这将修复它像thesoorae所说的那样添加flex方向

.homepage-banner-grid {
max-width: 1078px;
height: auto;
display: flex;
flex-direction:column;
align-items: center;
margin-left: auto;
margin-right: auto;
}

如何垂直对齐块

2 个答案: