Revision 323 is a pre-publication revision. (Viewing current revision instead.)

Vertically align text in a div

This is loosely taken from this page: Here is the html structure: [html] <div class="container"> <p> Your content here. </p> </div> [/html] Here's the css: Must have a height, be set to be a table and have the vertical-align set. [css] .container { height:75px; display: table; vertical-align:middle; } .container p { display:table-cell; vertical-align: middle; } [/css]

Revisions

  • December 17, 2012 @ 23:21:39 [Current Revision] by PeterLugg
  • December 17, 2012 @ 23:17:35 by PeterLugg

Revision Differences

December 17, 2012 @ 23:17:35Current Revision
Content
 Added: This is loosely taken from this page:
 Added: Here is the html structure:
 Added: [html]
 Added: &lt;div class=&quot;container&quot;&gt;
 Added: &lt;p&gt;
 Added: Your content here.
 Added: &lt;/p&gt;
 Added: &lt;/div&gt;
 Added: [/html]
 Added: Here's the css:
 Added: Must have a height, be set to be a table and have the vertical-align set.
Deleted: Added: [css]
 Added: .container { height:75px; display: table; vertical-align:middle; }
 Added: .container p { display:table-cell; vertical-align: middle; }
 Added: [/css]

Note: Spaces may be added to comparison text to allow better line wrapping.

Tags: ,

No comments yet.

Leave a Reply