文本没有垂直居中答案

【问题标题】：text not getting vertically centered文本没有垂直居中
【发布时间】：2020-09-15 11:19:00
【问题描述】：

我正在尝试在仪表板上创建可点击的图块（框形）。

问题 1： 我尝试使用 flexbox，但垂直对齐对我不起作用。所以我尝试使用填充顶部。我正在寻找的是磁贴应该具有垂直居中的图标和文本，它们也应该响应式维护（使用引导程序）。

div.wrapper{
    height:150px;
    padding:20px;
    padding-top:30%;
    border:1px solid black;
    margin:auto;
    text-align:center
}

使用 padding-top 无法响应。在减小屏幕宽度时，文本和图标会从磁贴中出来。使用 line-height 等于框高会使多行文本远离磁贴。

问题 2： 为了使整个磁贴可点击，我尝试在我的锚标记上使用 display:block，当它位于 div

内时

<div class="col-md-2 button-col">
<div class="wrapper">
    <i class="fa fa-gear fa-2x"></i>
    <br><br>
    <a href="<?php echo base_url(); ?>listitems" class="mybutton">Manage Items</a>
</div>
</div>

css：

a.mybutton{
    font-weight:bold;
    text-decoration:none;
    font-family:Arial;
    display: block;
}

但完整的磁贴无法点击。所以我把锚标签放在了div外面。

这是我现在的布局：

<div class="container">
<div class="row">
    <div class="col-md-2 button-col">
        <a href="<?php echo base_url(); ?>listitems" class="mybutton">
            <div class="wrapper">
                <i class="fa fa-gear fa-2x"></i>
                <br><br>
                Click for Production Calculation Chart
            </div>
        </a>
    </div>
    <div class="col-md-2 button-col">
        <a href="<?php echo base_url(); ?>listitems" class="mybutton">
            <div class="wrapper">
                <i class="fa fa-gear fa-2x"></i>
                <br><br>
                Production Calculation Chart
            </div>
        </a>
    </div>
    <div class="col-md-2 button-col">
        <a href="<?php echo base_url(); ?>listitems" class="mybutton">
            <div class="wrapper">
                <i class="fa fa-gear fa-2x"></i>
                <br><br>
                Tile Number 3
            </div>
        </a>
    </div>
    <div class="col-md-2 button-col">
        <a href="<?php echo base_url(); ?>listitems" class="mybutton">
            <div class="wrapper">
                <i class="fa fa-gear fa-2x"></i>
                <br><br>
                This is Tile 4
            </div>
        </a>
    </div>
    <div class="col-md-2 button-col">
        <a href="<?php echo base_url(); ?>listitems" class="mybutton">
            <div class="wrapper">
                <i class="fa fa-gear fa-2x"></i>
                <br><br>
                Tile 5
            </div>
        </a>
    </div>
    <div class="col-md-2 button-col">
        <a href="<?php echo base_url(); ?>listitems" class="mybutton">
            <div class="wrapper">
                <i class="fa fa-gear fa-2x"></i>
                <br><br>
                Tile 6 Text
            </div>
        </a>
    </div>
   <!-- And Many More Tiles Will Come and make more rows -->
</div>
</div>

这是我当前的 css：

div.button-col{
    padding:2rem;
}
div.wrapper{
    height:150px;
    padding:20px;
    border:1px solid black;
    margin:auto;
    text-align:center
}
div.wrapper:hover{
    background-color:blue;
    cursor: pointer
}
div.wrapper i.fa{
    color:#438EB9;
}
div.wrapper:hover i.fa {
    color:white;
} 
a.mybutton{
    font-weight:bold;
    text-decoration:none;
    font-family:Arial;
}
a.mybutton:hover
{
    color:white;
}

【问题讨论】：

标签： html css responsive-design flexbox responsive

【解决方案1】：

问题 1 的答案：尝试将样式设置为链接“a”元素并删除手动定位和用户vertical-align 属性：

div.wrapper{
    border: 1px solid black;
    padding: 10px;
    text-align: center;
}

div.wrapper a{
    display: inline-block;
    vertical-align: middle;
}

我还从 HTML 中删除了 <br>：

<div class="col-md-2 button-col">
<div class="wrapper">
    <i class="fa fa-gear fa-2x"></i>

    <a href="<?php echo base_url(); ?>listitems" class="mybutton">Manage Items</a>
</div>
</div>

如果您仍希望将<i> 和<a> 分别设置在自己的行中，则将<i> 与<div> 包裹起来，它应该垂直和水平居中。

请注意，需要像 inline-block 这样的正确显示类型才能使垂直中心正常工作。

在行动中看到它https://jsfiddle.net/74wg2za6/

问题2的答案要使整个磁贴可点击，只需使用<a> 包裹整个包装器 div，而不是使文本“管理项目”仅可点击，请参见此处

https://jsfiddle.net/kr45qoa1/

我只是利用<a> 标签来包装所有<div>、<i> 和文本。

希望这是您正在寻找的。p>

【讨论】：

正如我所说，我需要一个磁贴（一个方形框），它有一个很棒的字体图标，然后是下一行的磁贴文本。为此，我使用了您已删除的中断标签。其次，如果我增加 .wrapper 的高度（因为我想让它看起来有点像一个盒子），文本只会在顶部保持对齐，而不是垂直对齐。请查收：jsfiddle.net/xLw29jro
你建议的解决方案，我已经在我的问题描述中写了。请检查我的当前布局部分。我想知道是否可以通过将锚点保持在 .wrapper 中来完成
@ITSagar 好的，正如我上面提到的，你不需要高度，因为它会破坏垂直居中.. 改用填充。
@ITSagar 作为图标字体，也有人建议使用 div 而不是 br 并且会给出你想要的结果。
但我在问题描述中提到我使用了 padding:30% ，但它不起作用。我需要将图块的高度保持为 150 像素，然后我需要将文本居中，这太响应了

【解决方案2】：

你可以试试吗：

<!DOCTYPE html>
<html>
<head>

<script src='js/fontawesome-all.min.js'></script>

<style>

    div.button-col{
        height:150px;
        line-height: 150px;
        width: 100%;
        margin: 20px auto;
        text-align:center;
    }

    a.mybutton{
        width: 90%;
        display:inline-block;
        padding: 20px;
        line-height: 20px;
        border:1px solid black;
        font-weight:bold;
        text-decoration:none;
        cursor: pointer;
    }

    a.mybutton:hover {
        background-color:blue;
        color:white;
    }

</style>
</head>
<body>

    <div class="container">
    <div class="row">
        <div class="col-md-2 button-col">
            <a href="my_url" class="mybutton">
                <i class="fa fa-gear fa-2x"></i>
                <br><br>
                Click for Production Calculation Chart
            </a>
        </div>
    </div>
    </div>

</body>
</html>

【讨论】：

我以为你会自动理解 col-md-2。但是为了更清楚起见，我用更多的列更新了问题描述代码。每个图块中的文本长度可能会有所不同。

【解决方案3】：

终于找到了一个适合我的解决方案。 请建议这是否是最佳解决方案？或者我们可以做得更好

.button-col{
            display: table;
            width: 100%;
            height: 150px; /* for demo only */
            border: 1px solid black;
            margin-bottom:20px;
        }
        .centeralign{                
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .contentouter{
            width:100%;
            height:100%;
            display: inline-block;
            vertical-align: top;
        }
        div.button-col:hover, div.button-col:hover a{
            background-color:blue;
            color:white;
        }
        .icon{
            margin-top:30px;
            margin-bottom:10px;
        }
        .content
        {
            display: table;
            width: 100%;
            height: 70px;
        }
        .contentinner{                
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }
        a.my-button
        {
            font-weight:bold;
            text-decoration:none;
        }

HTML：

<div class="col col-sm-2 button-wrapper">
                <a href="my_url" class="my-button">
                    <div class="button-col">
                        <div class="centeralign">
                            <div class="contentouter">
                                <div class="icon">
                                    <i class="fa fa-gear fa-2x"></i>
                                </div>
                                <div class="content">
                                    <div class="contentinner">
                                        Items
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div class="col col-sm-2 button-wrapper">
                <a href="my_url" class="my-button">
                    <div class="button-col">
                        <div class="centeralign">
                            <div class="contentouter">
                                <div class="icon">
                                    <i class="fa fa-gear fa-2x"></i>
                                </div>
                                <div class="content">
                                    <div class="contentinner">
                                        Click for Production Calculation Chart
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </div>

【讨论】：