html - otro - centrar texto en div horizontalmente
¿Cómo alinear horizontalmente ul al centro de div? (5)
Estoy tratando de centrar un <ul> dentro de un <div> . Probé lo siguiente
text-align: center;
y
left: 50%;
Esto no está funcionando.
CSS :
.container {
clear: both;
width: 800px;
height: 70px;
margin-bottom: 10px;
text-align: center;
}
.container ul {
padding: 0 0 0 20px;
margin: 0;
list-style: none;
}
.container ul li {
margin: 0;
padding: 0;
}
Quiero que la ul esté centrada dentro del contenedor.
A continuación hay una lista de soluciones para centrar las cosas en CSS horizontalmente. El fragmento de código incluye a todos ellos.
html {
font: 1.25em/1.5 Georgia, Times, serif;
}
pre {
color: #fff;
background-color: #333;
padding: 10px;
}
blockquote {
max-width: 400px;
background-color: #e0f0d1;
}
blockquote > p {
font-style: italic;
}
blockquote > p:first-of-type::before {
content: open-quote;
}
blockquote > p:last-of-type::after {
content: close-quote;
}
blockquote > footer::before {
content: "/2014";
}
.container,
blockquote {
position: relative;
padding: 20px;
}
.container {
background-color: tomato;
}
.container::after,
blockquote::after {
position: absolute;
right: 0;
bottom: 0;
padding: 2px 10px;
border: 1px dotted #000;
background-color: #fff;
}
.container::after {
content: ".container-" attr(data-num);
z-index: 1;
}
blockquote::after {
content: ".quote-" attr(data-num);
z-index: 2;
}
.container-4 {
margin-bottom: 200px;
}
/**
* Solution 1
*/
.quote-1 {
max-width: 400px;
margin-right: auto;
margin-left: auto;
}
/**
* Solution 2
*/
.container-2 {
text-align: center;
}
.quote-2 {
display: inline-block;
text-align: left;
}
/**
* Solution 3
*/
.quote-3 {
display: table;
margin-right: auto;
margin-left: auto;
}
/**
* Solution 4
*/
.container-4 {
position: relative;
}
.quote-4 {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
/**
* Solution 5
*/
.container-5 {
display: flex;
justify-content: center;
}
<main>
<h1>CSS: Horizontal Centering</h1>
<h2>Uncentered Example</h2>
<p>This is the scenario: We have a container with an element inside of it that we want to center. I just added a little padding and background colors so both elements are distinquishable.</p>
<div class="container container-0" data-num="0">
<blockquote class="quote-0" data-num="0">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 1: Using <code>max-width</code> & <code>margin</code> (IE7)</h2>
<p>This method is widely used. The upside here is that only the element which one wants to center needs rules.</p>
<pre><code>.quote-1 {
max-width: 400px;
margin-right: auto;
margin-left: auto;
}</code></pre>
<div class="container container-1" data-num="1">
<blockquote class="quote quote-1" data-num="1">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 2: Using <code>display: inline-block</code> and <code>text-align</code> (IE8)</h2>
<p>This method utilizes that <code>inline-block</code> elements are treated as text and as such they are affected by the <code>text-align</code> property. This does not rely on a fixed width which is an upside. This is helpful for when you don’t know the number of elements in a container for example.</p>
<pre><code>.container-2 {
text-align: center;
}
.quote-2 {
display: inline-block;
text-align: left;
}</code></pre>
<div class="container container-2" data-num="2">
<blockquote class="quote quote-2" data-num="2">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 3: Using <code>display: table</code> and <code>margin</code> (IE8)</h2>
<p>Very similar to the second solution but only requires to apply rules on the element that is to be centered.</p>
<pre><code>.quote-3 {
display: table;
margin-right: auto;
margin-left: auto;
}</code></pre>
<div class="container container-3" data-num="3">
<blockquote class="quote quote-3" data-num="3">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 4: Using <code>translate()</code> and <code>position</code> (IE9)</h2>
<p>Don’t use as a general approach for horizontal centering elements. The downside here is that the centered element will be removed from the document flow. Notice the container shrinking to zero height with only the padding keeping it visible. This is what <i>removing an element from the document flow</i> means.</p>
<p>There are however applications for this technique. For example, it works for <b>vertically</b> centering by using <code>top</code> or <code>bottom</code> together with <code>translateY()</code>.</p>
<pre><code>.container-4 {
position: relative;
}
.quote-4 {
position: absolute;
left: 50%;
transform: translateX(-50%);
}</code></pre>
<div class="container container-4" data-num="4">
<blockquote class="quote quote-4" data-num="4">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
<h2>Solution 5: Using Flexible Box Layout Module (IE10+ with vendor prefix)</h2>
<p></p>
<pre><code>.container-5 {
display: flex;
justify-content: center;
}</code></pre>
<div class="container container-5" data-num="5">
<blockquote class="quote quote-5" data-num="5">
<p>My friend Data. You see things with the wonder of a child. And that makes you more human than any of us.</p>
<footer>Tasha Yar about Data</footer>
</blockquote>
</div>
</main>
display: flex
.container {
display: flex;
justify-content: center;
}
Notas :
- No es un hack 👍👍👍
- Soporte del navegador: flexbox
max-width y margin
Puede centrar horizontalmente un elemento de nivel de bloque asignando un ancho fijo y configurando el margin-right y el margin-left a auto .
.container ul {
/* for IE below version 7 use `width` instead of `max-width` */
max-width: 800px;
margin-right: auto;
margin-left: auto;
}
Notas :
- No se necesita contenedor 👍
- Requiere (máximo) ancho del elemento centrado para ser conocido 👎
IE9 +: transform: translatex(-50%) e left: 50%
Esto es similar al método de centrado peculiar que usa posicionamiento absoluto y márgenes negativos.
.container {
position: relative;
}
.container ul {
position: absolute;
left: 50%;
transform: translatex(-50%);
}
Notas :
- El elemento centrado se eliminará del flujo de documentos . Todos los elementos ignorarán completamente el elemento centrado. 👎👎👎
- Esta técnica permite el centrado vertical utilizando la
toplugar de a laleftytranslateY()lugar detranslateX(). Los dos pueden incluso ser combinados. 👍 - Soporte del navegador:
transform2d
IE8 +: display: table y margin
Al igual que la primera solución, utiliza valores automáticos para los márgenes derecho e izquierdo, pero no asigna un ancho. Si no es necesario que sea compatible con IE7 y las versiones anteriores, esto es más adecuado, aunque parece un poco difícil utilizar el valor de propiedad de la table para la display .
.container ul {
display: table;
margin-right: auto;
margin-left: auto;
}
IE8 +: display: inline-block y text-align
También es posible centrar un elemento como lo haría con texto normal. Desventaja: debe asignar valores tanto a un contenedor como al elemento en sí.
.container {
text-align: center;
}
.container ul {
display: inline-block;
/* One most likely needs to realign flow content */
text-align: initial;
}
Notas:
- No requiere especificar un ancho (máximo)
- Alinea el contenido del flujo al centro (efecto secundario potencialmente no deseado)
- Funciona bastante bien con un número dinámico de elementos de menú (es decir, en los casos en que no se puede saber el ancho que ocupará un solo elemento)
Haga los márgenes izquierdo y derecho de su auto UL y asígnele un ancho:
#headermenu ul {
margin: 0 auto;
width: 620px;
}
Edición: como kleinfreund ha sugerido, también puede alinear el contenedor en el centro y darle a la ul una pantalla de bloque en línea, pero también tiene que dar a los LI un flotante izquierdo o una pantalla en línea.
#headermenu {
text-align: center;
}
#headermenu ul {
display: inline-block;
}
#headermenu ul li {
float: left; /* or display: inline; */
}
Puede centrar la ul rápida y sencilla con CSS Flexbox .
#headermenu {
display: flex;
justify-content: center; /* center ul horizontally */
align-items: center; /* center ul vertically (if necessary) */
width: 800px;
height: 70px;
margin-bottom: 10px;
}
Puedes comprobar esto resuelto tu problema ...
#headermenu ul{
text-align: center;
}
#headermenu li {
list-style-type: none;
display: inline-block;
}
#headermenu ul li a{
float: left;
}
ul {
width: 90%;
list-style-type:none;
margin:auto;
padding:0;
position:relative;
left:5%;
}