Question

如何在middle内制作标记a的垂直和水平对齐li？为什么vertical-align:middle; ul内的li不起作用？最好使用padding或vertical-align？

body{
	margin:0;
}
.col1{
	width:150px;
	border:solid;
	height:750px;
	display:table;
}
ul{
	margin:0;
	padding:0;
}
ul li{
	list-style:none;
	height:40px;
	vertical-align:middle;
}
ul li a{
	text-decoration:none;
}

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="col1">
	<ul>
		<li><a href="">Items</a></li>
		<li><a href="">Products</a></li>
		<li><a href="">Contacts</a></li>
		<li><a href="">Other</a></li>
		<li><a href="">Email</a></li>
	</ul>
</div>
</body>
</html>

Answer 1

将以下内容添加到<ul>。它起作用的原因是因为<ul>的父级将其显示设置为display: table;如果其显示值设置为vertical: align center;，则子级将响应table-cell。另请注意，我们正在定位<ul>本身，而不是单个<li>。

ul {
  ...
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

另外，请考虑将.col1的高度设置为100vh，而不是硬编码的像素值。

.col1 {
  ...
  height: 100vh;
}

要在每个列表项内部垂直对齐锚点，我们添加以下内容：

ul li {
  ...
  position: relative;
}
ul li a {
  ...
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<强>输出

http://codepen.io/antibland/pen/jqdwqG

Answer 2

如果要使用vertical-align: middle进行定位，可以创建与容器高度（col1）一样大的行高，并将vertical-align设置为ul。它的工作原理如下：http://codepen.io/anon/pen/bpzReW。但是，我认为安迪有更好的解决方案。

Answer 3

你可以用保证金：0自动; 它会使它们居中

Css对齐标签内部li，垂直菜单

3 个答案: