Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Senior Member
    Join Date
    May 2003
    Location
    UK
    Posts
    2,354
    Member #
    1326
    In this tutorial you will learn how to center text and/or elements horizontally and vertically.

    This tutorial uses CSS style rules, if you still use tags like <font> then I suggest you click here

    How to center text
    This first example will show you how to center text. We use the CSS property called text-align and we set text-align to center. Possible values are center, left, right and justify.

    The CSS:
    Code:
    p.center_text
    {
      text-align: center;
    }
    The HTML:
    HTML Code:
    <p class="center_text">
      This text will be centered. We use the css property text-align and the value 'center' to achieve this.
    </p>
    Note: if you nest that <p> inside a parent which has a width, then that <p>'s text will be centered according to the width value.

    How to center an element
    So we can center text, but what if you want to center the element the text is in but not the actual text?
    A common mistake (for me anyway) is to have the following CSS
    HTML Code:
    p.center_element
    {
      margin-left: auto;
      margin-right: auto;
    }
    And HTML like
    HTML Code:
    <p class="center_element">
    This element will not be centered, although we are using margin-left and margin-right we need to give a width to the
     css rule otherwise the element will take up 100% width, thus not centering.
    </p>
    How to properly center an element

    This is the correct CSS
    HTML Code:
    p.center_element_proper
    {
      margin-left: auto;
      margin-right: auto;
      width: 400px;
    }
    The HTML
    HTML Code:
    <p class="center_element_proper">
    This element will be centered, as the style rule is setting its left and right margin to be auto, or equal.<br />
    Note: the text will not be centered, only the element the text resides in.
    </p>
    How to center an element and it's text
    To center an element's and the text inside that element is just a combination of the above - use margin-left, margin-right and text-align.

    CSS
    HTML Code:
    p.center_element_and_text
    {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      width: 400px;
    }
    HTML
    HTML Code:
    <p class="center_element_and_text">
    This element and it's contents will be centered using margin-left, margin-right and text-align.
    </p>
    How to center vertically
    One way to set text to be verticaly aligned is to change it's display value to table-cell as they can be vertically aligned.

    The CSS
    HTML Code:
    div.center_vertical_text
    {
      border: 1px solid blue;
      height: 10em;
      min-height: 10em;
      display: table-cell;
      vertical-align: middle;
    }
    The HTML
    HTML Code:
    <div class="center_vertical_text"><p>
    You can center vertically using CSS by setting the display property of an element to 'table-cell' as table cells
     can be centered vertically. You also need to set the height and the min-height.
     I set a border to show the gap above and below this text.
    </p></div>
    Hopefully this will help you understand how to align text and page elements. I have attached a file showing these examples.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,686
    Member #
    5580
    Liked
    716 times
    I guess it would be considered against WDF rules to post another URL like this ...
    but I think this URL is very helpful, so I'll post it anyhow. Hopefully, it will remain
    online for a long time:

    http://warpspire.com/tipsresources/w...column-tricks/


  4. #3
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    I know this thread has not been active for some time, but I was reading it and I thought I'd point out that the center vertical example here does not work in IE7.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

center text horizontally and vertically css

,
css center text horizontally and vertically
,
css centering text horizontally
,
css text center horizontally
,
horizontal thread guide
,
how to center an element within another element horizontally
,
how to center element using margin horizontally in css
,
how to center html element horizontally
,

html center text horizontally

,
text centered horisontally vertically css
Click on a term to search for related topics.
All times are GMT -6. The time now is 10:56 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com