SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Auckland, NZ
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Text alignment in a CSS Element!

    Hi All,

    This is a dumbass question, but - for the life of me I can't get text to align vertically within a basic CSS element.

    In my CSS file I have (among other things):

    ---
    p { font-size: 10px; }

    #middle {
    position: absolute;
    top: 123px;
    right: 50px;
    padding: 2px;
    border: 1px solid #CCC;
    background: #FFFFFF;
    width: 547px;
    height: 400px;
    }
    ---

    Now in the index.html file, it has:

    <div id="middle">
    <p>hehehe</p>
    </div>

    Which is very simply calling the "middle" element, which has already been positioned and defined in the CSS file.

    So, how do I get the "hehehe" text to be centered both horizontally and vertically. Horizontal is easy, add "align: center;" into the "p" definition in CSS. I've tried every combination of "valign" and "vertical-align" in all the various places... no luck... Any ideas?

    Have a look at http://www.nerdcore.net/~jaeden/ for the site as it is so far. =D You'll be able to see what I'm talking about there... roughly...

    Cheers!,
    - J.

  2. #2
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dont know about your problem but -

    HTML Code:
    <head><title>| Jae - One |</title></html>
    <link rel=StyleSheet href="default.css" type="text/css">
    should be

    HTML Code:
    <head>
    <title>| Jae - One |</title>
    <link rel="StyleSheet" href="default.css" type="text/css">
    </head>
    <body>
    .........

  3. #3
    SitePoint Member
    Join Date
    Dec 2003
    Location
    Auckland, NZ
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dangermouse
    Dont know about your problem but -

    HTML Code:
    <head><title>| Jae - One |</title></html>
    <link rel=StyleSheet href="default.css" type="text/css">
    should be

    HTML Code:
    <head>
    <title>| Jae - One |</title>
    <link rel="StyleSheet" href="default.css" type="text/css">
    </head>
    <body>
    .........
    Done and done. =D Thanks!

  4. #4
    SitePoint Wizard Dangermouse's Avatar
    Join Date
    Oct 2003
    Posts
    1,024
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem. You might want to google doctypes too

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,543
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I can't get text to align vertically within a basic CSS element
    I'm afraid there isn't an easy way to center vertically in css.

    You can either set padding/margins to push the element to the centre or you can use a negative margin on a positioned element with a fixed height (and known height of parent) e.g.top:50%; margin-top:-xxpx (where xx equals half the height of the elements height (if known)).
    e.g.
    Code:
    html,body {
     height: 100%; 
    }
    img {
     position: absolute;
     left: 50%;
     top: 50%;
     margin-top: -30px; /* make this half your image height */
     margin-left: -30px; /* make this half your image width */
    }
    Works for images or divs (elements) with known heights etc.

    If you only want less than one line centred (that isn't going to wrap) then you could set the line-height to the same height as the elemenet and then the text will be vertically centred automatically.

    e.g.
    Code:
    #middle {
    position: absolute;
    top: 123px;
    right: 50px;
    padding: 2px;
    border: 1px solid #CCC;
    background: #FFFFFF;
    width: 547px;
    height: 400px;
    background:red;
    text-align:center;
    line-height:400px;
    }
    p { font-size: 10px; }
    (It's not really the proper use of line-height but it does work in some instances.)

    For mozilla you could simply use display:table-cell which will accomplish the task easily however doesn't support it so it's not really much use at the moment.

    Hope that helps.

    Paul


Bookmarks

Posting Permissions

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