Question

据我所知，垂直对齐问题在这里一再出现。我发了一个帐号只是为了发布这个，所以希望我能证明这一点。我已经搜索了几十个其他帖子和方法来修复，但似乎无法理解。

我正在使用骨架框架。我只是想把我的h1与导航＆gt; ul＆gt; li对齐。也许这与我的问题有关，就像当我尝试使用一个父div具有相对位置和子相对的修复时......好吧它不起作用。

从技术上讲，我可以只应用填充但不会效率低，比如如果我更改了字体系列或h1的大小，则需要我在屏幕上进行像素窥视以查看是否可以填充它回到与h1垂直居中。

任何提示？我还是CSS的新手。谢谢你的耐心。

这是我的HTML：

</head>
<body>

<div class="container">

    <header>
    <h1 class="four columns">my header</h1>
    <nav class="ten columns">
        <ul class="nav1">
            <li><a class="toggleclass" href="#">Work</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Elsewhere</a></li>
            <li><a href="#">Contact</a></li>
        </ul>

        <div class="worknav hidden">
            <ul class="nav2">
                <li><a href="#">Sound</a></li>
                <li><a href="#">Moving-Visuals</a></li>
                <li><a href="#">Stills</a></li>
                <li><a href="#">Design</a></li>
                <li><a href="#">Text</a></li>
            </ul>
        </div>
    </nav>
    <p class="sixteen columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, dicta, voluptatibus, adipisci neque doloremque accusantium magni possimus aliquam totam commodi recusandae id culpa animi temporibus blanditiis nulla pariatur dolore voluptate?</p>
    </header>
</div>

这是我的CSS：

header{

    padding-top: 20px;
}

header a{
    text-decoration: none;
}

header h1{

}

nav li{
    display: inline;
    padding-right: 50px;
}


.worknav{
    display: none;
}

感谢您的帮助。我还附上了我想要实现的目标。（http://cl.ly/RbV7）

Answer 1

此类问题的部分技巧是了解CSS框模型的工作原理。框模型描述了边距，边框和填充如何协同工作。您可以阅读here。

您还需要了解文本的布局方式。具体来说，font-size和line-height如何协同工作，以及各种类型的CSS显示选项。您可以尝试this article深入了解排版，但有一些关于理解文本大小的好信息，尤其是关于字体大小和行高的图表。

无论你决定什么，只要你改变字体大小，你就必须在CSS中调整一些东西，如果你理解了填充，那么你可能就是这样。如果你弄清楚行高是如何工作的，你可以这样做。

我已经和jsfiddle玩了一下，如果它将H1标题的顶部与你正在寻找的列表项的顶部对齐，我想我能够通过调整行来实现它-height。

垂直对齐标题中的h1和nav - 使用骨架框架

1 个答案: