Question

我正试图在中间垂直对齐我的文字/按钮。但是，我使用了vertical-align: middle;并且我使用div嵌套了所有文本/按钮，我不知道为什么它不起作用。

我已经在堆栈论坛上检查了this帖子的答案，我按照了答案仍然无法做到。

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: Helvetica;
}

.text-vertical-center {
    text-align: center;
    vertical-align: middle;
    color: green;
}

.text-vertical-center h1 {
    margin: 0;
    padding: 0;
    font-size: 4.5em;
    font-weight: 700;
    color: green;
}

/* Custom Button Styles */

.btn-dark {
    border-radius: 0;
    color: #fff;
    background-color: rgba(0,0,0,0.4);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #fff;
    background-color: rgba(0,0,0,0.7);
}

hr.small {
    max-width: 100px;
}

/* Side Menu */


.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/bg.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header id="top" class="header">
        <div class="text-vertical-center">
            <h1 =class"main1">Start Bootstrap</h1>
            <h3 =class"main2">Free Bootstrap Themes &amp; Templates</h3>
            <br>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
        </div>
    </header>

Answer 1

在给出的示例中，您需要将display: table-cell添加到.text-vertical-center。

Answer 2

为了使其工作，您需要对代码进行新的更改。如果你想让它居中，你需要它display: inline-block;，并有一个垂直对齐的兄弟。我能想到的最佳方法如下：

html,
body {
    width: 100%;
    height: 100%;
}

body {
    font-family: Helvetica;
}

.text-vertical-center {
    text-align: center;
    vertical-align: middle;
    color: green;
    display: inline-block;
}

.text-vertical-center h1 {
    margin: 0;
    padding: 0;
    font-size: 4.5em;
    font-weight: 700;
    color: green;
}

/* Custom Button Styles */

.btn-dark {
    border-radius: 0;
    color: #fff;
    background-color: rgba(0,0,0,0.4);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: #fff;
    background-color: rgba(0,0,0,0.7);
}

hr.small {
    max-width: 100px;
}

/* Side Menu */


.header {
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
    background: url(../img/bg.jpg) no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.header:before {
    content: "";
    vertical-align: middle;
    height: 100%;
    display: inline-block;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header id="top" class="header">
        <div class="text-vertical-center">
            <h1 =class"main1">Start Bootstrap</h1>
            <h3 =class"main2">Free Bootstrap Themes &amp; Templates</h3>
            <br>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
            <a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
        </div>
    </header>

CSS垂直对齐中间的文本/按钮

2 个答案: