嵌套在另一个容器中的容器内文本的垂直对齐方式

Question

我正在使用容器，并且有一个 div“links-lowercontainer”，其中嵌套了另外 3 个 div：

链接-lowerleftcontainer、链接-lowercentrecontainer、链接-lowerrightcontainer

这允许我将描述文本添加到 links-lowerleftcontainer 和 links-lowerrightcontainer 列， links-lowercentrecontainer 本质上是一个间隔列。

一切看起来都如我所愿，除了我很难垂直对齐，因此 links-lowerleftcontainer 和 links-lowerrightcontainer 中的文本垂直位于顶部。见下文 显示问题的图片

我添加了一些边框来显示链接-左下容器和链接-右下容器。 我尝试过使用：

对齐项目：居中
调整内容：flex-start
对齐内容：flex-start

在 links-lowerleftcontainer 和更高级别的 links-lowercontainer 中，但没有乐趣。 我确信我缺少一些简单的东西来能够对齐到顶部。希望有人能指出我正确的方向。

我已包含以下 HTML 和 CSS 片段：

.container[data-type="links-outercontainer"] {
    container-type: inline-size;
    flex-direction: column;
    padding: 0px 3px 0px 3px;
    display: flex;
    max-inline-size: 1140px;
    margin: auto;
    gap: 0 0;
    border: solid 1px rgba(255,0,0,0.75);
    border-radius: 5px;
}

.container[data-type="links-titlecontainer"] {
    container-type: inline-size;
    flex-direction: column;
    /*border: solid 1px blue;*/
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 100%;
    margin: auto;
    gap: 0 0;
}

.links-title {
    color: rgba(255,0,0,0.75);
    font-family: "helvetica";
    text-align: left;
    padding: 3px 0px 3px 0px;
    line-height: 1em;
}

.container[data-type="links-uppercontainer"] {
    container-type: inline-size;
    flex-direction: row;
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 100%;
    margin: auto;
    gap: 0 0;
    /*border: solid 1px rgba(2,0,0,0.75);*/
}

.container[data-type="links-upperleftcontainer"] {
    container-type: inline-size;
    flex-direction: column;
    /*border: solid 1px rgb(128 128 128);*/
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 48%;
    margin: auto;
    gap: 0 0;
}

.container[data-type="links-uppercentrecontainer"] {
    container-type: inline-size;
    flex-direction: column;
    /*border: solid 1px rgb(255 106 0);*/
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 4%;
    margin: auto;
    gap: 0 0;
}



.container[data-type="links-upperrightcontainer"] {
    container-type: inline-size;
    flex-direction: column;
    /*border: solid 1px rgb(128 128 128);*/
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 48%;
    margin: auto;
    gap: 0 0;
}

.links-websitename {
    color: #000000;
    font-family: "helvetica";
    text-align: left;
    padding: 0px 0px 0px 0px;
    line-height: 1.5em;
}


.container[data-type="links-lowercontainer"] {
    container-type: inline-size;
    flex-direction: row;
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 100%;
    margin: auto;
    gap: 0 0;
    border: solid 1px rgba(2,0,0,0.75);
/*  align-items: center;
    justify-content: flex-start;
    align-content: flex-start;
    vertical-align: top;
    text-align: justify;*/
}

.container[data-type="links-lowerleftcontainer"] {
    container-type: inline-size;
    flex-direction: column;
    border: solid 1px rgb(182 255 0);
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 48%;
    margin: auto;
    gap: 0 0;
}

.container[data-type="links-lowercentrecontainer"] {
    container-type: inline-size;
    flex-direction: column;
    /*border: solid 1px rgb(255 106 0);*/
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 4%;
    margin: auto;
    gap: 0 0;
}

.container[data-type="links-lowerrightcontainer"] {
    container-type: inline-size;
    flex-direction: column;
    border: solid 1px rgb(182 255 0);
    padding: 0px 0px 0px 0px;
    display: flex;
    width: 48%;
    margin: auto;
    gap: 0 0;
}

.links-websitedescription {
    color: #000000;
    font-family: "helvetica";
    /*text-align: justify;*/
    padding: 0px 0px 5px 0px;
    line-height: 1.5em;
    /*align-content: start;*/
    /*vertical-align: bottom;*/
}
/*---Desktop Viewport---*/
@media(min-width: 1024px) {
    .links-title {
        font-size: 25px;
        font-weight: 600;
    }

    .links-websitename {
        font-size: 15px;
        font-weight: 600;
    }

    .links-websitedescription {
        font-size: 15px;
        font-weight: 400;
    }
}
/*---Tablet Viewport---*/
@media(max-width: 1023px) {
    .links-title {
        font-size: 20px;
        font-weight: 600;
    }

    .links-websitename {
        font-size: 13px;
        font-weight: 600;
    }

    .links-websitedescription {
        font-size: 13px;
        font-weight: 400;
    }
}
/*---Mobile Viewport---*/
@media(max-width: 767px) {
    .links-title {
        font-size: 16px;
        font-weight: 600;
    }

    .links-websitename {
        font-size: 12px;
        font-weight: 600;
    }

    .links-websitedescription {
        font-size: 12px;
        font-weight: 400;
    }
}

    <section>   
    <div class="container" data-type="links-outercontainer">
            <div class="container" data-type="links-titlecontainer">
                <p class="links-title">World War 2 Links</p>
            </div>
            <div class="container" data-type="links-uppercontainer">
                <div class="container" data-type="links-upperleftcontainer">
                    <!--<a href="https://www.iwm.org.uk/">-->
                    <p class="links-websitename">Imperial War Museums</p>
                    <!--</a>-->
                </div>
                <div class="container" data-type="links-uppercentrecontainer"></div>
                <div class="container" data-type="links-upperrightcontainer">
                    <!--<a href="https://www.nationalww2museum.org/">-->
                    <p class="links-websitename">The National WWII Museum - New Orleans</p>
                    <!--</a>-->
                </div>
            </div>
            <div class="container" data-type="links-lowercontainer">
                <div class="container" data-type="links-lowerleftcontainer">
                    <p class="links-websitedescription">Imperial War Museums explores conflict from WW1 to the present day. Visit one of our 5 sites. Explore our archives to discover real stories of modern war</p>
                </div>
                <div class="container" data-type="links-lowercentrecontainer"></div>
                <div class="container" data-type="links-lowerrightcontainer">
                    <p class="links-websitedescription">The National WWII Museum tells the story of the American experience in the war that changed the world—why it was fought, how it was won, and what it means today—so that all generations will understand the price of freedom and be inspired by what they learn.</p>
                </div>
            </div>
     </div>
   </section>

Answer 1

您在

margin:auto

上有一个

.container[data-type="links-lowerleftcontainer"]

，它会自动居中。

删除该声明可以解决问题。请参阅屏幕截图。