将水平列表垂直居中放置在div中

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了将水平列表垂直居中放置在div中相关的知识，希望对你有一定的参考价值。

To centre, make "line-height" the same as the div height.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. 	<head>
  4. 		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  5. 		<title>Untitled Document</title>
  6. 		<style>
  7.  
  8. #links{
  9. 	border: 1px solid #eee;
  10. 	height: 50px;
  11. 	line-height: 50px;
  12. }
  13.  
  14. #links ul
  15. {
  16. 	margin: 0px;
  17. 	padding: 0px;
  18. 	float: left;
  19. 	list-style-type: none;
  20. }
  21.  
  22. #links ul li {
  23. 	margin-right: 20px;
  24. 	padding: 0px;
  25. 	display: inline;
  26. }
  27. 		</style>
  28. 	</head>
  29. 	<body>
  30. 		<div id="links">
  31. 			<ul>
  32. 				<li><a href="#">Link 1 </a></li>
  33. 				<li><a href="#">Link 2 </a></li>
  34. 				<li><a href="#">Link 3 </a></li>
  35. 			</ul>
  36. 		</div>
  37. 	</body>
  38. </html>

以上是关于将水平列表垂直居中放置在div中的主要内容，如果未能解决你的问题，请参考以下文章

将链接放置在 div 的中间（水平/垂直）

如何在没有绝对定位的情况下将主体元素内的 div 垂直和水平居中？ [复制]

在任何浏览器维度的中间居中垂直和水平可扩展的 div [重复]

前端面试CSS系列——DIV垂直水平居中

css 适应“如何在无序列表或div中垂直和水平居中文本”

CSS 将图像垂直和水平居中放置在容器中