texto - centrar una imagen horizontalmente css
Centrado horizontal/distribuido uniformemente<li> dentro de<ul> dentro de<div> (8)
Básicamente se reduce a agregar text-align: center to ul y display: inline-block a los li''s.
Esto parece hacer el truco:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.navbar {
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
.navbar li{
display: inline-block;
padding: 2px;
width: 150px;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
</body>
</html>
Tenga una barra de navegación <div> , dentro hay un <ul> y cada <li> contiene una <a> con un enlace (esto es para una barra de navegación)
Busqué en google y este sitio y no pude encontrar exactamente lo que estaba buscando.
Lo que quiero es poder mantener mi estilo actual (usando <li> con <a> ''s adentro) y quiero que <li> se distribuya y centre de manera uniforme (esta parte es natural si se distribuyen uniformemente ... .) dentro de <ul> (que está dentro de la barra de navegación <div> ).
De todos modos, si eso no tiene sentido, hágamelo saber, actualmente solo quedan alineados ... Aquí está lo que tengo:
HTML:
<div class="navbar">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
CSS:
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0px;
padding: 0px;
width: 90%;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
También puedo incluir mi .navbar a {} si es necesario. Soy muy nuevo en CSS, así que vaya fácil, también busqué SO y Google primero y no pude encontrar nada como esto (aunque tal vez ya que soy nuevo no me doy cuenta de que es lo mismo).
Si este es un método CSS defectuoso y / o hay una forma mucho más fácil y comúnmente utilizada de hacer esto. Continúa y vincula / publica eso en su lugar, pero preferiría de esta manera, ya que tiene más sentido para mí.
Gracias
Bueno, he intentado todo, nada está funcionando, así que si tienes el mismo problema, te recomendaría que uses tablas y td para alinearlas, todavía funciona correctamente.
Estás buscando algo así:?
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.navbar li{
display:inline;
line-height:30px;
}
.navbar li a { padding:.4em 5em;}
<div class="navbar">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
Esto permite una ul ultrarrápida centrada sin ancho si no desea especificar un ancho del 90%:
<!doctype html>
<div class="navbar">
<div id="for-ie">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
</div>
<style>
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0 auto;
padding: 0px;
border:1px solid red;
display:table;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
#for-ie { text-align:center; }
#for-ie ul { display:inline-block; }
#for-ie ul { display:inline; }
</style>
<![endif]-->
Probado en IE6, FX 3.
EDITAR: Estilo alternativo sin el elemento extraño:
<!doctype html>
<div class="navbar">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
<style>
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
padding: 0px;
zoom:1;
border:1px solid red;
overflow: hidden;
}
.navbar li{
padding: 2px;
width: 150px;
display:inline-block;
}
</style>
<!--[if IE]>
<style>
.navbar li { display:inline; }
</style>
<![endif]-->
La forma correcta de hacer esto en estos días es simplemente usar Flexbox:
.navbar ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: nowrap; /* assumes you only want one row */
}
Necesitas definir un fijo para tu contenedor.
por ejemplo:
.navbar {
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF; }
Si quieres mantener tu color bg de .navbar, quédate con el 100%, elimina el flotador que queda a la izquierda de li y dale un estilo como este->
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0 auto;
padding: 0px;
width: 800px;
overflow: hidden;
}
.navbar li{
display: inline-block;
padding: 2px;
width: 150px;
marign: 0 auto;
}
Puede usar text-align: arreglado para hacer esto con solo unas pocas líneas de CSS, sin marcas adicionales.
Vea mi respuesta aquí: https://.com/a/15232761/87520
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
</ul>
<style>
.navbar > ul {text-align:justify;}
.navbar > ul > li {display:inline-block}
.navbar > ul:after { content:'' ''; display:inline-block; width: 100%; height: 0 }
</style>
puede usar "display: table" y "display: table-cell" el código está más limpio y el ancho li no está codificado:
<div class="navbar">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
.navbar {
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none;
padding: 0px;
display: table;
table-layout: fixed;
width: 100%;
}
.navbar li{
padding: 2px;
display:table-cell;
width: 50px; /* just for the browser to get idea that all cells are equal */
text-align: center;
border: 1px solid #FF0000;
}