html - horizontalmente - ¿Cómo centrar un elemento<p> dentro de un contenedor<div>?

centrar texto horizontalmente css

Question

Quiero que mi elemento <p> esté en el centro de un contenedor <div> , como en el centro perfecto: los márgenes superior, inferior, izquierdo y derecho dividen los espacios por igual.

¿Cómo puedo lograr eso?

div {
width: 300px;
height: 100px;
}
p {
position: absolute;
top: auto;
}

<div>
<p>I want this paragraph to be at the center, but it''s not.</p>
</div>

Answer 1

♣ debes hacer estos pasos:

1. el elemento madre debe colocarse (para EXP puede darle posición: relativo;)
2. El Elemento hijo debería haber colocado " Absoluto " y los valores deberían establecerse de la siguiente manera: arriba: 0; botón: 0; derecha: 0; izquierda: 0; (ser medio verticalmente)
3. para el Elemento hijo debe establecer " margen: auto " (para estar en la mitad vertical)
4. El elemento hijo y madre debe tener el valor de "altura" y "ancho"
5. para elemento madre => text-align: center (para ser medio horizontalmente)

♣♣ Simplemente aquí está el resumen de esos 5 pasos:

.mother_Element {
position : relative;
height : 20%;
width : 5%;
text-align : center
}
.child_Element {
height : 1.2 em;
width : 5%;
margin : auto;
position : absolute;
top:0;
bottom:0;
left:0;
right:0;
}

Answer 2

No necesitas posicionamiento absoluto.

p {
text-align: center;
line-height: 100px;
}

Y ajustar a voluntad ...

Si el texto supera el ancho y va más de una línea.

En ese caso, el ajuste que puede hacer es incluir la propiedad de visualización en sus reglas de la siguiente manera;

(Agregué un fondo para una mejor vista del ejemplo)

div
{
width:300px;
height:100px;
display: table;
background:#ccddcc;
}
p {
text-align:center;
vertical-align: middle;
display: table-cell;
}

Juega con esto en este JBin

Answer 3

Para obtener el centrado hacia la izquierda / derecha, luego aplique text-align: center to div y margin: auto to the p .

Para el posicionamiento vertical, debe asegurarse de que comprende las diferentes formas de hacerlo, este es un problema que se plantea comúnmente: la alineación vertical de los elementos en una división

Answer 4

Solo necesitas agregar text-align: center a tu <div>

En su caso, también elimine los dos estilos que agregó a su <p> .

Echa un vistazo a la demostración aquí: http://jsfiddle.net/76uGE/3/

Buena suerte

Answer 5

¿Contenido centrado y medio?

Hacerlo de esta forma :

<table style="width:100%">
<tr>
<td valign="middle" align="center">Table once ruled centering</td>
</tr>
</table>

Lo jugué aquí

Ja, déjame adivinar .. quieres DIVs ..

simplemente haga que su primer DIV externo se comporte como una tabla-celda y luego aplíquelo con alineación vertical: medio;

<div>
<p>I want this paragraph to be at the center, but I can''t.</p>
</div>
div {
width:500px;
height:100px;
background-color:aqua;
text-align:center;
/* there it is */
display:table-cell;
vertical-align:middle;
}

jsfiddle.net/9Mk64/