Question

我正在尝试对齐一些div，以便每个都有6个ontop，遍布页面的整个高度，文本居中。这里有一个例子：

http://gyazo.com/871760197e572bd35d79ac3be63d9869

到目前为止，我所做的一切都没有用，它只是扩展了页面。我在它们周围创建了一个div（以便轻松更改所有这些框中的文本），其值为height: 100vh;。出于某种原因，div之间似乎存在差距。我已经删除了所有代码，只有组合div，但它仍然有一个差距。

以下是代码：

<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">

 <style>
        body {
    margin: 0;
    padding: 0;
    top: 0;
}

a {
    padding: 0;
    margin: 0;
    text-decoration: none;
    color: black;
}
.navigation-bar {
    float: left;
    width: 350px;
    font-size: 40px;
    height: 100vh;
    text-align: center;
}

.portfolio {
    background-color: #909090;
    height: 16%;
    line-height: 16%;
}

.twitter {
    background-color: #a0a0a0;
    height: 16%;
}

.git-hub {
    background-color: #909090;
    height: 16%;
}

.email {
    background-color: #a0a0a0;
    height: 16%;
}

.linkedin {
    background-color: #909090;
    height: 16%;
}

.about-me {
    background-color: #a0a0a0;
    height: 16%;
}

</head>

<body>
    <div class="navigation-bar">
        <a href="#">
            <div class="portfolio">
                <h3>Portfolio</h3>
            </div>
        </a>
        <a href="#">
            <div class="twitter">
                <h3>Twitter</h3>
            </div>
        </a>
        <a href="#">
            <div class="git-hub">
                <h3>Github</h3>
            </div>
        </a>
        <a href="#">
            <div class="email">
                <h3>Email</h3>
            </div>
        </a>
        <a href="#">
            <div class="linkedin">
                <h3>LinkedIn</h3>
            </div>
        </a>
        <a href="#">
            <div class="about-me">
                <h3>About Me</h3>
            </div>
        </a>   
    </div>
</body>

</html>

感谢您提供任何帮助，而且我没有足够的声誉来发布图片，所以如果有人可以编辑它我会很感激！

编辑：这是一个小提琴：https://jsfiddle.net/TobiasYeomans/8ysLounf/

Answer 1

您需要从标题中删除内置边距。

JSfiddle demo

h3 {
    margin: 0;
}

Answer 2

由于h3 - 浏览器给它一个默认的边距。因此，添加h3 {margin:0;}应该可以满足您的需求。

*或.navigation-bar h3 {margin:0}如果您不想弄乱其余的布局。

试图修复垂直对齐的div之间的间隙

2 个答案: