css - justificar - como cambiar el color de h1 en html

Centro de texto en div?

Question

Tengo un div 30px alto y 500px ancho. Este div puede contener dos líneas de texto, una debajo de la otra, y tiene el estilo (acolchado) correspondiente. Pero a veces solo contiene una línea, y quiero que esté centrada. es posible?

Answer 1

Agregar al selector que contiene el texto

margin:auto;

Answer 2

Agregar altura de línea también ayuda.

text-align: center;
line-height: 18px; /* for example. */

Answer 3

Creo que quieres que el texto se centre verticalmente dentro de tu div, no (solo) horizontalmente. La única forma confiable que conozco de hacer esto es usar:

display: table-cell;
vertical-align: middle;

en tu div, y funciona con cualquier cantidad de líneas. Puedes ver una prueba aquí: http://jsfiddle.net/qMtZV/1/

Asegúrese de verificar el soporte del navegador de esta propiedad, ya que no es compatible, por ejemplo, en IE7 o versiones anteriores.

ACTUALIZAR 02/10/2016

Cinco años después, esta técnica sigue siendo válida, pero creo que hay soluciones mejores y más sólidas para este problema. Dado que el soporte de Flexbox es bueno hoy en día, es posible que desee hacer algo en este sentido: http://codepen.io/michelegera/pen/gPZpqE .

Answer 4

Funcionara para ti?

div { text-align: center; }

Answer 5

HTML

<div class="outside">
<div class="inside">
<p>Centered Text</p>
</div>
</div>

CSS

.outside {
position: absolute;
display: table;
}
.inside {
display: table-cell;
vertical-align: middle;
text-align: center;
}

Answer 6

He mirado alrededor y

display: table-cell;
vertical-align: middle;

parece ser la solución más popular

Answer 7

Me puede estar perdiendo algo aquí, pero lo has intentado:

text-align:center;

??

Answer 8

Para centrar horizontalmente, use text-align:center .

Para centrar verticalmente, solo se puede usar vertical-align:middle si hay otro elemento en la misma fila a la que se está alineando.
Véalo trabajar here .

Usamos un tramo vacío con una altura del 100% y luego colocamos el contenido en el siguiente elemento con un alineamiento vertical: centro.

Existen otras técnicas, como usar la celda de tabla o poner el contenido en un elemento absolutamente posicionado con arriba, abajo, izquierda y derecha, todo en cero, pero todos tienen problemas de compatibilidad con varios navegadores.

Answer 9

Para el div principal, use el siguiente CSS:

style="display: flex;align-items: center;"

Answer 10

Puede intentar usar en su CSS la propiedad vertical-align para centrarla verticalmente

div {
vertical-align:middle;
}

si se trata de un problema de tamaño, tenga en cuenta que dos líneas de texto y un estilo de relleno tienen una gran probabilidad de tener una altura superior a 30 píxeles.

Por ejemplo, si el tamaño de fuente es 12 px y tu relleno div es 5 px, una altura de texto de una línea de texto será 5px (padding-top) + 12px + 5 px (relleno-inferior) = 22px <30px así que no hay problema,

Con un div de 2 líneas de texto, será 5px + 12px * 2 (2 líneas) + 5px = 34px> 30px y su altura de div se cambiará automáticamente.

Intente aumentar su altura div (quizás 40px) o reducir su relleno.

Espero que ayude

Answer 11

Si tiene texto dentro de un <div> :

text-align: center;
vertical-align: middle;
display: table-cell;

Answer 12

display: block;
text-align: center;

Answer 13

div {
height: 256px;
width: 256px;
display: table-cell;
text-align: center;
line-height: 256px;
}

El truco es establecer la line-height la line-height igual a la height del div .