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/