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

Question

I understand that the vertical align problem has popped up over and over here. 我知道垂直对齐问题在这里一再出现。 I made an account just to post this, so hopefully I can justify asking. 我发了一个帐号只是为了发布这个，所以希望我能证明这一点。 I've searched through dozens of other posts and methods for a fix, but can't seem to get it / understand. 我已经搜索了几十个其他帖子和方法来修复，但似乎无法理解。

I'm using skeleton framework. 我正在使用骨架框架。 I'm just trying to align my h1 with my nav>ul>li. 我只是想把我的h1与我的导航> ul> li对齐。 Maybe this has something to do with my problem, as when I try using a fix in which a parent div has relative position and the child relative.. well it doesn't work. 也许这与我的问题有关，就像当我尝试使用一个父div具有相对位置和子相对的修复时......好吧它不起作用。

Technically, I could just apply padding to the but wouldn't that be inefficient, say if I changed the font family or size of the h1, it would require me to pixel peep at my screen to see if I can pad it back into being vertically centred with the h1. 从技术上讲，我可以只应用填充但不会效率低，比如如果我更改了h1的字体系列或大小，它会要求我在屏幕上进行像素窥视以查看是否可以将其重新填充为垂直居中于h1。

Any tips? 有小费吗？ I'm still pretty new to CSS. 我还是CSS的新手。 Thanks for your patience. 谢谢你的耐心。

here is my html: 这是我的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>

Here is my CSS: 这是我的CSS：

header{

    padding-top: 20px;
}

header a{
    text-decoration: none;
}

header h1{

}

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


.worknav{
    display: none;
}

Thanks for any help. 谢谢你的帮助。 I've also attached an image of what I want to achieve. 我还附上了我想要实现的目标。 ( http://cl.ly/RbV7 ) （ http://cl.ly/RbV7 ）

Answer 1

Part of the trick to this type of question is understanding how the CSS box model works. 这类问题的部分技巧是了解CSS框模型的工作原理。 The box model describes how margins, borders and padding work together. 框模型描述了边距，边框和填充如何协同工作。 You can read about that here . 你可以在这里阅读。

You'll also need to understand how text is laid out. 您还需要了解文本的布局方式。 Specifically, how font-size and line-height work together, and within the various types of CSS display options. 具体来说，font-size和line-height如何协同工作，以及各种类型的CSS显示选项。 You might try this article which gets in a bit deep about typography, but has some good information on understanding text sizing, especially the diagram on font-size and line-height. 您可以尝试这篇文章深入了解排版，但有一些关于理解文本大小的好信息，特别是关于字体大小和行高的图表。

Whatever you decide, you're going to have to adjust something in CSS any time you change the font size, and if you understand padding, that might be what you go with. 无论你决定什么，你都必须在你改变字体大小的时候用CSS调整一些东西，如果你理解填充，那么你可能就是这样。 If you figure out how line-height works, you could do that instead. 如果你弄清楚行高是如何工作的，你可以这样做。

I've played with the jsfiddle a bit and if it's aligning the top of the H1 title with the top of the list items that you're looking for, I think I was able to get it to do that by tweaking line-height. 我已经使用了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