it-swarm.com.de

Wie zentriere ich ein <p> -Element in einem <div> -Container?

Ich möchte, dass sich mein <p>-Element in der Mitte eines Containers <div> befindet, da es perfekt zentriert ist - der obere, untere, linke und rechte Rand teilen die Leerzeichen gleichmäßig auf.

Wie kann ich das erreichen?

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>

31
Johnsy

Sie brauchen keine absolute Positionierung Verwendung

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

}

Und nach Belieben anpassen ...

Wenn der Text die Breite überschreitet und mehr als eine Zeile ist

In diesem Fall können Sie die Anzeigeeigenschaft wie folgt in Ihre Regeln aufnehmen.

(Ich habe einen Hintergrund hinzugefügt, um das Beispiel besser sehen zu können)

div
{
  width:300px;
  height:100px;  
  display: table; 
  background:#ccddcc;  
}


p {
  text-align:center; 
  vertical-align: middle;
  display: table-cell;   
}

Spiel damit in dieser JBin

enter image description here

44
Fico

Um links/rechts zu zentrieren, wenden Sie text-align: center auf die div und margin: auto auf die p an.

Bei der vertikalen Positionierung sollten Sie sicherstellen, dass Sie die verschiedenen Möglichkeiten kennen. Dies ist ein häufig gestelltes Problem: Vertikale Ausrichtung von Elementen in einem div

9
GordonsBeard

♣ Sie sollten diese Schritte ausführen: 

  1. das mother Element sollte stehen (für EXP kann man die Position angeben: relativ;)
  2. das child Element sollte " Absolute " positioniert haben und die Werte sollten wie folgt eingestellt werden: top: 0; buttom: 0; right: 0; left: 0; (Mitte senkrecht sein)
  3. für das child Element Sie sollten " margin: auto " (vertikal in der Mitte) einstellen.
  4. das child und mother Element soll haben "height" und "width" value
  5. für mother Element => text-align: center (horizontal horizontal)

♣♣ einfach hier ist die Zusammenfassung dieser 5 Schritte:

.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;
    }
2

Zentrierte und mittelmäßige Inhalte?

Mach es so:

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

Ich fummelte es hier

Ha, lass mich raten .. du willst DIVs ..

machen Sie einfach, dass sich Ihr erster äußerer DIV wie eine Tabellenzelle verhält, und gestalten Sie ihn mit vertikaler Ausrichtung: Mitte;

<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/

0
Milche Patern

fügen Sie dem p-Element drei Stilregeln hinzu.

.myCenteredPElement{
    margin-left:  auto;
    margin-right: auto;
    text-align: center;
}
0
freddy mercury