UL 不会以 Div 为中心。填充不会解决它。保证金
Posted
技术标签:
【中文标题】UL 不会以 Div 为中心。填充不会解决它。保证金【英文标题】：UL won't center on the Div. Padding won't fix it. Margin either 【发布时间】：2017-01-01 05:24:27 【问题描述】：我经常看到这个问题，但我找不到填充或边距的答案。出于某种原因，我无法将ul 元素正确居中在div 中，而div 需要这样。
谁能解释我做错了什么以及如何解决它？
https://jsfiddle.net/norbertoalexander/4ea23bbn/2/
/* FUENTES
font-family: 'Lobster', cursive;
font-family: 'Playfair Display', serif;
*/
/*
Fondo = #FEFFA0
Borde = #ACDB86
Fondo Texto = #EEEEEE
Hoover = #547C66
Letras = #3B5B5D
*/
html, body
height: 100%;
margin: 0;
background-color: #FEFFA0;
div.head
height: 70px;
background-color: #ACDB86;
margin: 0 auto;
h1
font-family: 'Lobster', cursive;
font-size: 45px;
text-align: center;
div.menu
border-style: solid;
border-color: blue;
margin: 5px;
float: left;
width: 150px;
height: 500px;
list-style: none;
text-align: center;
ul
margin: 0 auto;
list-style: none;
text-align: center;
font-size: 20px;
li
margin: 0 auto;
text-align: center;
h2
text-align: center;
font-size: 25px;
font-family: 'Lobster', cursive;
div.fuent
border-style: solid;
border-color: blue;
margin: 5px;
float: right;
width: 150px;
height: 500px;
div.leng
border-style: solid;
border-color: yellow;
margin: 5px;
width: 72%;
float: left;
div.resu
border-style: solid;
border-color: blue;
margin: 5px;
width: 72%;
float: left;
<!DOCTYPE HTML">
<html>
<head>
<title>Lenguajes</title>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Lobster|Playfair+Display" rel="stylesheet">
<link href="styles/leng.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--titulo-->
<div class="head">
<h1>Lenguajes</h1>
</div>
<div class="menu">
<ul>
<li><h2>Menu</h2></li>
<li><a href="index.html">Incio</a></li>
<li><a href="algoritmo.html">Algoritmos</a></li>
<li><a href="lenguajes.html">Lenguajes</a></li>
<li><a href="problemas.html">Problemas</a></li>
<li><a href="about.html">Sobre mi</a></li>
</ul>
</div>
<div class="fuent">
Fuentes
</div>
<div class="resu">
Resumen
</div>
<div class="leng">
Lenguaje
</div>
</body>
</html>【问题讨论】：
您想根据哪个（div 或 window）使 ul 居中？请更具体 【参考方案1】：<ul> 上有一个填充，去掉它，菜单居中：
ul
padding: 0;
【讨论】：
以上是关于UL 不会以 Div 为中心。填充不会解决它。保证金的主要内容，如果未能解决你的问题，请参考以下文章
解决 图片在div中等比例缩放问题 （未解决：图片比例小于盒子模型时不会自动填充）
HTML CSS：文本不会在 Android 4.3 中水平填充 div