我想将锚点的文本(水平和垂直)居中放置在其 li
容器中。
我读过我可以通过在容器上使用 text-align: center;
来轻松地将它们居中。
但是要使它们垂直居中,我需要将 li
显示为表格,将 a
显示为表格单元格。
我不喜欢这种方法,因此我将锚点的文本放入 div
并尝试将 div
与 margin: auto;
居中。出于某种原因,即使 div
是具有定义高度的块元素,这也只能在水平方向上工作。有人知道原因吗?
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
nav ul {
display: flex;
list-style: none;
justify-content: center;
align-items: center;
height: 4em;
background-color: #783F27;
}
nav ul li a {
display: block;
border: solid medium;
border-radius: 0.4em;
margin: 0 0.5em;
width: 7em;
height: 3em;
color: goldenrod;
}
a div {
width: max-content;
height: max-content;
margin: auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><a href=""><div>Menu</div></a></li>
<li><a href=""><div>News</div></a></li>
<li><a href=""><div>About</div></a>
<li><a href=""><div>Contact</div></a></li>
</ul>
</nav>
</header>
</body>
</html>
答案 0 :(得分:0)
您可以再次使用 flexbox - 就像使用 ul
一样!
将 .nav ul li a
显示为弹性框,然后使用 align-items: center;
将链接垂直居中。
您的固定代码:
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
nav ul {
display: flex;
list-style: none;
justify-content: center;
align-items: center;
height: 4em;
background-color: #783F27;
}
nav ul li a {
display: flex;
align-items:center;
border: solid medium;
border-radius: 0.4em;
margin: 0 0.5em;
width: 7em;
height: 3em;
color: goldenrod;
}
a div {
width: max-content;
height: max-content;
margin: auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><a href=""><div>Menu</div></a></li>
<li><a href=""><div>News</div></a></li>
<li><a href=""><div>About</div></a>
<li><a href=""><div>Contact</div></a></li>
</ul>
</nav>
</header>
</body>
</html>
答案 1 :(得分:0)
另一种选择是删除链接的绝对 height
和 width
,并使用 padding
代替。
html {
box-sizing: border-box;
}
* {
box-sizing: inherit;
margin: 0;
padding: 0;
}
nav ul {
display: flex;
list-style: none;
justify-content: center;
align-items: center;
height: 4em;
background-color: #783F27;
}
nav ul li a {
display: block;
border: solid medium;
border-radius: 0.4em;
margin: 0 0.5em;
color: goldenrod;
padding: .75em 2em;
}
a div {
width: max-content;
height: max-content;
margin: auto;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header>
<nav>
<ul>
<li><a href=""><div>Menu</div></a></li>
<li><a href=""><div>News</div></a></li>
<li><a href=""><div>About</div></a>
<li><a href=""><div>Contact</div></a></li>
</ul>
</nav>
</header>
</body>
</html>