Question

我一直在学习htm，css和php。我正在创建一个触及所有内容的网站这些东西。它仅用于教育目的。

如何制作它，以便在导航文本旁边显示我的网站名称，并将其全部居中。就像现在我在导航栏中有网站名称，旁边有导航文本但是导航文本不在线的中心，有点低。这是网站：http://66.172.10.179/resolver/

CSS：

/* Body */
body {
    background-color: #FF5930;
    margin: 0px;
}

a {
    text-decoration: none;
    color: white;
}

/* Navigation bar */

header {
    background-color: #FF4719;
    padding: 5px 0 8px 15px;
}

header nav h2 {
    display: inline;
    font-family: sans-serif;

}

header nav ul {
    display: inline;
}

header nav ul li {
    display: inline;
    padding: 0 5px;
    font-size: 15px;
    font-family: sans-serif;    
    color: white;
    height: 10px;
}

header nav ul li:hover {

}

HTML：

<header>
    <nav>
        <h2><a href="index.php">Skype Resolver</a></h2>
        <ul>
            <li><a href="index.php">Resolver</a></li>
            <li><a href="blacklist.php">Blacklisting</a></li>
            <li><a href="purchase.php">Purchase API</a></li>
            <li><a href="dtools.php">Domain tools</a></li>
            <li><a href="stools.php">Spam tools</a></li>
            <li><a href="mtools.php">Misc tools</a></li>
        </ul>                           
    </nav>
</header>

Answer 1

我在H2中添加了line-height，为nav创建了一个CSS东西并添加了：display：inline-block;

像魅力一样工作！

Answer 2

要实现此目的而不实际放入任何行高，您可以添加以下内容：

<强> CSS

nav{
    display:table;
}

nav h2 {
    vertical-align: middle;
}
nav ul{
   vertical-align: middle;
}

这将使文本垂直居中，而不必猜测线高......

<强> DEMO JSFiddle

如何在导航栏之间居中文本

2 个答案: