Question

我正在通过免费代码营学习编码，并在我的个人投资组合页面上工作（https://codepen.io/DerekDenHartigh/pen/ypgvKV）我有顶部的按钮，我很难修改文本 - 我必须使用 HTML h2 元素来获得正确大小的字体，因为我的 CSS 都不适用于它。现在我想垂直居中，但我不确定如何。谢谢！

body{
    background-color: lightgrey
}

#Banner{
    height: 70px;
    text-align: center;
    border: 5px solid black;
    border-radius: 10px;
}

button{
    height: 60px;
    background-color: grey;
    font-size: 20px;
}

button:hover {
    background-color:   #D2B48C;
    color: white;
}

#bAboutMe{
    width:calc(100%/3);
    background-color: grey;
}

#bProgrammingProficiencies{
    width:calc(100%/3);
    background-color: grey;
    border-left: 5px solid black;
    border-right: 5px solid black;
}

#bContcactInfo{
    width:calc(100%/3);
    background-color: grey;
}

<div class="row" id="Banner">
    <div class=column id="bAboutMe">
        <button class="btn btn-block"><h2>About Me</h2></button>
    </div>
    <div class=column id="bProgrammingProficiencies">
        <button class="btn btn-block"><h2>Programming Proficiencies</h2></button>
    </div>
    <div class=column id="bContcactInfo">
        <button class="btn btn-block"><h2>Contact Information</h2></button>
    </div>
</div>

Answer 1

您的<h2>已应用margin-top:20px; margin-bottom:10px的css引导程序。你只需要将这两个设置为0

h2 {
 margin:0;
}

或

h2{
 margin-top:0;
 margin-bottom:0;
}

在块引导按钮内垂直居中文本

1 个答案: