align - navbar css center
CSS: UL horizontal: haciéndolo centrado (2)
Estoy tratando de hacer un menú / lista horizontal. Tiene una combinación de botones y botones independientes que están envueltos en sus propias formas individuales.
Con mucho pirateo obtuve todos los botones, en formas y no en formas, para alinearlos horizontalmente.
Sin embargo, no he podido centrar todo en la página.
¿Podría alguien señalarme lo que no estoy viendo?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<link rel="shortcut icon" href="http://localhost:7001/nsd/images/favicon.ico">
<style type = "text/css">
#horizontal_li_menu
{
margin:0 auto;
text-align:center;
border: 1px solid green;
width:750px;
list-style-type: none;
text-decoration: none;
padding:0 auto;
}
#horizontal_li_menu li
{
display: inline;
float:left;
padding-right: 10px;
}
</style>
</head>
<body>
<ul id = "horizontal_li_menu">
<li>
<input value="Update" onclick="location.href=''#''" name="button" type="button"/>
</li>
<li>
<form name="formExportVECI" method="post" action="exportveci">
<input name="person_id" value="661774" type="hidden">
<input name="submitExport" value="Export To Microsoft Excel" type="submit">
</form>
</li>
<li>
<form id="ufdh" name="formImportVECI" action="importveci" method="post" enctype="multipart/form-data">
<input name="person_id" value="661774" type="hidden">
<input value="Import From Microsoft Excel" path="Upload" type="submit">
<input id="fileData" name="fileData" value="" type="file">
</form>
</li>
<li>
<input value="Search/Home" onclick="location.href=''search''" name="buttonHome" type="button"/>
</li>
</ul>
</body></html>
Centrar un elemento de bloque horizontalmente dentro de una página u otro elemento
Utilizar
#element_id{margin: 0 auto;}
Eso centrará el elemento alrededor de su contenedor.
Por lo tanto, para centrar la lista horizontalmente en la página
aplicar el estilo anterior a la ul , y no a la li .
Por cierto, a menos que el div con id horizontal_li_menu_container tenga contenido adicional, es redundante; el ul funcionará perfectamente sin él.
Si eso no funciona, verifique lo siguiente:
- Encuentre la suma de anchos, almohadillas y márgenes de todos los li s en ese ul
- Asegúrate de que la suma sea igual al ancho del ul
- Asegúrese de que el contenedor div no tenga un ancho especificado, o que ya se haya centrado en la página
Espero que esto ayude.
De acuerdo con tu CSS:
#horizontal_li_menu_container ul y horizontal_li_menu_container_ul están seleccionando el mismo elemento. No estoy seguro si te das cuenta de esto.
Además, al usar flotadores, debe borrarlos .