垂直對齊標題中的h1和nav - 使用骨架框架

Question

我知道垂直對齊問題在這里一再出現。 我發了一個帳號只是為了發布這個，所以希望我能證明這一點。 我已經搜索了幾十個其他帖子和方法來修復，但似乎無法理解。

我正在使用骨架框架。 我只是想把我的h1與我的導航> ul> 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框模型的工作原理。 框模型描述了邊距，邊框和填充如何協同工作。 你可以在這里閱讀。

您還需要了解文本的布局方式。 具體來說，font-size和line-height如何協同工作，以及各種類型的CSS顯示選項。 您可以嘗試這篇文章深入了解排版，但有一些關於理解文本大小的好信息，特別是關於字體大小和行高的圖表。

無論你決定什么，你都必須在你改變字體大小的時候用CSS調整一些東西，如果你理解填充，那么你可能就是這樣。 如果你弄清楚行高是如何工作的，你可以這樣做。

我已經使用了jsfiddle，如果它將H1標題的頂部與你正在尋找的列表項的頂部對齊，我想我能夠通過調整行高來實現它。

垂直對齊標題中的h1和nav - 使用骨架框架

問題描述

1 個解決方案

解決方案1
2 2013-09-26 03:48:58

垂直對齊標題中的h1和nav - 使用骨架框架

問題描述

1 個解決方案

解決方案1 2 2013-09-26 03:48:58

解決方案1
2 2013-09-26 03:48:58