Äquivalent valign=center for <p> mit css

Hier ist eine Lösung, die vermeidet die Verwendung von <table> - tags.

Es funktioniert auf Internet Explorer 8 und 9, Chrome, Firefox, und Safari (aber nicht den IE7, aber letztes mal habe ich überprüft, Sie sind etwa 2% Marktanteil weltweit).

Erste, loszuwerden, die Idee zu versuchen, zu versuchen, vertikal ausrichten von text in einem Absatz-tag - anstatt zu denken, in Bezug auf ausrichten eines Absatzes innerhalb eines Containers.

Verwenden Sie die markup - ...

<div class="container">
    <p>The text that you'd wish to have vertically aligned in the middle of the
       container...which might be like an article column, or whatever</p>
</div>

und CSS -

.container{
     border: 1px solid red; /*to see the example*/
     display: table-cell;
     height: /* insert whatever height you want*/;
     vertical-align: middle;
 }

Diese wird vertikal ausrichten Absatz im vertikalen Zentrum des container-element.

Nun eine wirklich tolle Lösung ist, wenn Sie einen übergeordneten container voller Inhalte, die Sie möchten, dass alle Kinder in nebeneinander und perfekt vertikal ausgerichtet, um die Mitte, als auch.

Natürlich, verwenden Sie diese version, wenn Sie eine bestimmte Größe, die Sie wollen, dass der übergeordnete container:

Markup:

<div class="containerTwo">
     <p>here's some text and stuffs, make this whatever the heck 
     you want it to be</p>
     <p>these can be any height and, really any element, the magic
     is in the display property of the elements so this still 
     looks pretty semantic</p>
     <p>more stuff and this could be like an image or something</p>
</div>

CSS:

.containerTwo{
     border: 1px solid green; /* for sake of the example */
     display: table-cell;
     height: /* what you want it to be */;
     vertical-align: middle;
}
.containerTwo p{
     border: 1px solid blue; /* for sake of example */
     display: inline-block;
     width: 30%; /* all of the child elems shouldn't go over 100% */
     vertical-align: middle;
}

Dies wird produzieren ein übergeordnetes element, von jeder Höhe Ihrer Wahl mit all seinen Kindern perfekt ausgerichtet in der Mitte. Eine noch COOLERE Lösung, da braucht man nicht noch display: table-cell ist möglich, wenn Sie ein Bündel von unterschiedlichen Höhe Elemente, die Sie wollen alle zu richten, die in der Mitte mit einander, und Sie wollen nicht geben Sie eine Höhe für das übergeordnete element, sondern nur wollen, dass es gestreckt, um die Höhe des größten untergeordneten element: (oh, und das funktioniert im IE7)

Markup:

<div class="containerThree">
    <p>this is more text that you might want to have 
       vertically aligned in the middle with the others</p>
    <p>so here's a sibling paragraph you might want to 
       have aligned next to the other.</p>
    <div title="a really big element!"></div>
    <p>like the last one, the width can't add up to more
       than 100% of the parent element, otherwise they just
       wrap.  But atleast no table-cell!</p>
</div>

CSS:

.containerThree{
     border: 1px solid purple; /* for the example */
     /* and that's it!!! */
}

.containerThree p, .containerThree div{
     border: 1px solid blue;
     width: 20%; /* can't add beyond total width of parent */
     display: inline-block;
     *display: inline; /* ie7 hack */
     zoom: 1; /* ie7 hack */
     vertical-align: middle;

}

.containerThree div{  /* to simulate a big element */
     height: 400px; 
}

Für diese ein, wird alles vertikal aneinander ausrichten.

Hier ist ein Beispiel auf js-fiddle für ya zu sehen:

http://jsfiddle.net/NJqMp/1/

Es ist nicht so einfach, wie einfach die Zuordnung vertical-align:middle. Die Formatvorlage für Tabellen. Vertikal ausrichten ohne Tabellen, Sie können verwenden Sie eine der Techniken, die hier gezeigt werden:

http://blog.themeforest.net/tutorials/vertical-centering-with-css/

Ändern Sie Ihre Anzeige table-cell wird Ihnen erlauben, zu handeln, als ob der Absatz ist ein, nun, Tabelle, Zelle.

Hier ist ein Turnschuh, so können Sie spielen, um mit ihm ( http://jsfiddle.net/stillb4llin/RxpFF/ ). Ich habe einen Rahmen herum, damit Sie sehen können, die außerhalb des Absatzes.

In einer ähnlichen Frage, verwenden Sie display: inline-block mit einem Platzhalter-element vertikal zentrieren Sie den text innerhalb eines block-element:

<!doctype html>
<html lang="en">
<head>
 <style type="text/css">
 #blockbox { height: 500px; border: 1px solid black;}
 #container, #placeholder { height: 100%; }

 #content, #placeholder { display:inline-block; vertical-align: middle; }
 </style>
</head>

<body>
 <div id="blockbox">
  <p id="container">
    <span id="content">
    Content
    </span>
    <span id="placeholder"></span>
  </p>
 </div>
</body>
</html>

Vertikale Ausrichtung ist nur bei inline-Elemente oder Tabellenzellen, so verwenden Sie es zusammen mit display:inline-block oder display:table-cell mit einem display:table Elternteils, wenn vertikal zentrieren von block-Elementen.

Referenzen:

CSS Horizontale und Vertikale Zentrierung