Question

我想知道如何在导航栏中垂直居中按钮。现在，它们看起来像this，我希望它们居中。这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Brian Eversole site">
    <title>Brian Eversole</title>
    <link type="text/css" href="stylesheet3.css" rel="stylesheet">
</head>
<body>
    <nav>
        <ul>
            <li><a href="indextest.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contactus.html">Contact Us</a></li>
        </ul>
    </nav>
</body>
</html>

这是我的CSS代码：

/*CSS Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;

}

nav a {
    text-decoration: none;
    color: red;
    display: inline;
    font-size: 2em;
    border: black 1px solid;
    border-radius: .2em;
    padding: .01em;
}

nav li {
    display: inline;
    padding: .5em;

}

nav ul {
     background-color: green;
     text-align: center;
     vertical-align: center;
     position: fixed;
     width: 100%;
     height: 3em;

}

a:hover {
    color: black;
    background-color: grey;
    border: none;
}

任何有助于将按钮置于绿色栏中心的任何帮助都将受到赞赏。提前谢谢！

Answer 1

从nav ul删除身高

nav ul {
 // height: 3em;
}

将li设为inline-block

nav li {
  display: inline-block;
  vertical-align: top; //always use vertical align for inline-block element
}

make a阻止

nav a {
  display: block;
}

如果您想要自定义导航高度，可以使用flex

nav ul {
  height: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
}

CSS如何垂直居中导航栏中的按钮垂直对齐中心不起作用

1 个答案: