Question

我已经在线搜索了一段时间，似乎无法找到解决此问题的方法。也许我只是感到困惑。

鉴于以下css，如何在不改变框的垂直高度的情况下将文本垂直居中放置在每个彩色框内。如果您使用＆＃34; align-items：center;＆＃34;您将框缩小到字体的大小。

我需要弄明白的原因是因为我有以下代码：

    <div class="navigationBar">
        <div class="centeringContainer">

            <div class="myName">
                John Smith
            </div>


            <div class="centeringContainerTwo">
                <div class="spacer">
                </div>

                <nav class ="navigation">
                    <ul>
                        <li class="linkOne"><a href = "">Link 1</a></li>
                        <li class="linkTwo"><a href = "">Link 2</a></li>
                        <li class="linkThree"><a href = "">Link 3</a></li>
                        <li class="linkFour"><a href = "">Link 4</a></li>
                    </ul>
                </nav>


                <div class="spacer">
                </div>
                <div class="spacer">
                </div>

            </div>

        </div>

    </div>

您可以在此处查看随附的CSS：

http://codepen.io/omnomnious/pen/wgzvPv

我希望屏幕右侧的按钮（为了区分它们而着色为亮蓝色），与导航栏具有相同的高度，无论视口大小如何，并且文本垂直居中。这样，当我将鼠标悬停在链接上时，链接所覆盖的导航栏的整个部分会改变颜色，而不仅仅是小框。我非常感谢有关我是否正确使用flexbox以及是否有不良做法的任何帮助和反馈。

谢谢！

Answer 1

一个快速的解决方案是将锚文本包装在span元素中：

<li class="linkOne">
     <a href = "">
        <span>Link 1</span>
     </a>
</li>

revised codepen

您需要在导航栏中为所有父元素提供全高。这是通过给每个父display: flex来实现的。通过将元素设置为弹性容器，它会自动将全高度应用于子级（align-items: stretch）。

锚元素不能同时垂直居中和全高。它必须是一个或另一个。通过将锚文本包装在span中，您可以使锚元素成为全高，然后垂直居中span。

Answer 2

如果您为这些规则/元素添加高度，并让锚点display: flex; align-items: center; justify-content: center;将其文本居中竖直/水平

一般来说，当一个人使用身高百分比时，孩子的父母也需要一个身高，如果是嵌套的，则是父亲，等等

Updated codepen

.navigation ul{
    list-style-type: none;
    display: flex;

    height: 100%;            /*  added property  */
    margin: 0;               /*  added property  */
}

.navigation li{
    flex-grow:1;
    flex-basis:0;

    font-family: 'Open Sans', sans-serif;
    text-align: center;
    font-size: 1vw;

    height: 100%;            /*  added property  */
}

.navigation a{
    display: block;
    color: var(--colorTwo);
    background: deepskyblue;

    height: 100%;            /*  added property  */
    display: flex;           /*  added property - center text vertically  */
    align-items: center;     /*  added property - center text vertically  */
    justify-content: center; /*  added property - center text vertically  */
}

如何为flexbox项提供与父元素相同的高度？

2 个答案: