3

我知道垂直对齐问题在这里一遍又一遍地出现。我创建了一个帐户只是为了发布这个，所以希望我能证明我的要求。我已经搜索了几十个其他帖子和方法来修复，但似乎无法理解/理解。

我正在使用骨架框架。我只是想将我的 h1 与我的 nav>ul>li 对齐。也许这与我的问题有关，因为当我尝试使用父 div 具有相对位置而子 div 具有相对位置的修复时.. 它不起作用。

从技术上讲，我可以只对与 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 )

4

1 回答 1

2

这类问题的部分技巧是理解 CSS 盒子模型是如何工作的。盒子模型描述了边距、边框和内边距如何协同工作。你可以在这里阅读。

您还需要了解文本的布局方式。具体来说，字体大小和行高如何协同工作，以及在各种类型的 CSS 显示选项中。你可以试试这篇文章，它对排版有一些深入的了解，但是有一些关于理解文本大小的很好的信息，尤其是关于字体大小和行高的图表。

无论您决定什么，您都必须在更改字体大小时在 CSS 中进行一些调整，如果您了解填充，那可能就是您要使用的。如果你弄清楚 line-height 是如何工作的，你可以这样做。

我玩过 jsfiddle，如果它使 H1 标题的顶部与您正在寻找的列表项的顶部对齐，我想我可以通过调整行高来做到这一点。

于 2013-09-26T03:48:58.883 回答