Html 垂直对齐收割台中的h1和nav—；使用骨架框架
我知道垂直对齐问题在这里反复出现。我做了一个帐户只是为了发布这个，所以希望我可以证明我的要求。我已经搜索了几十篇其他帖子和方法来寻找修复方法，但似乎无法理解 我使用的是骨架框架。我只是想把我的h1和我的nav>ul>li对齐。也许这与我的问题有关，比如当我尝试使用父div具有相对位置而子div具有相对位置的修复时。。嗯，它不起作用 从技术上讲，我可以将填充应用于，但这不是效率低下的，比如说，如果我更改了h1的字体系列或大小，则需要我对屏幕进行像素窥视，看看是否可以将其填充回与h1垂直居中的位置 有什么建议吗？我对CSS还是很陌生。谢谢你的耐心 这是我的html：Html 垂直对齐收割台中的h1和nav—；使用骨架框架,html,css,Html,Css,我知道垂直对齐问题在这里反复出现。我做了一个帐户只是为了发布这个，所以希望我可以证明我的要求。我已经搜索了几十篇其他帖子和方法来寻找修复方法，但似乎无法理解 我使用的是骨架框架。我只是想把我的h1和我的nav>ul>li对齐。也许这与我的问题有关，比如当我尝试使用父div具有相对位置而子div具有相对位置的修复时。。嗯，它不起作用 从技术上讲，我可以将填充应用于，但这不是效率低下的，比如说，如果我更改了h1的字体系列或大小，则需要我对屏幕进行像素窥视，看看是否可以将其填充回与h1垂直居中的位置
</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框模型是如何工作的。长方体模型描述了边距、边框和填充如何协同工作。你可以读一下 您还需要了解文本的布局方式。具体来说，字体大小和线条高度如何协同工作，以及如何在各种类型的CSS显示选项中协同工作。您可以尝试深入了解排版，但有一些关于理解文本大小的好信息，特别是关于字体大小和行高的图表 无论你做什么决定，只要你改变字体大小，你就必须调整CSS中的一些内容，如果你理解填充，那可能就是你要做的。如果你知道线的高度是如何工作的，你可以这样做
我已经使用了JSFIDLE，如果它将H1标题的顶部与您要查找的列表项的顶部对齐，我想我可以通过调整行高来实现这一点。你能总结出一个或示例吗？我不知道具体怎么做，因为我使用的是一个框架css框架…？JSIDdle：如果你想自己设置一个框架，你只需进入jsfiddle.net，粘贴到html中，粘贴到css中（如果你有js的话），然后添加外部资源，如果你有（你有-骨架框架），我看到了。谢谢你的帮助，马克。
header{
padding-top: 20px;
}
header a{
text-decoration: none;
}
header h1{
}
nav li{
display: inline;
padding-right: 50px;
}
.worknav{
display: none;
}