Page 1 of 3 123 LastLast
Results 1 to 10 of 26

Thread: Having trouble aligning text in CSS

  1. #1
    Registered User
    Array
    Spider's Avatar

    Join Date
    Aug 2008
    Location
    Houston, Texas
    Posts
    3,687

    Default Having trouble aligning text in CSS

    I have been studying w3schools and trying to find out how to align text. What is automatic in tables seems to be unobtainable in css - namely vertical alignment of text inside a box or panel.

    I found out how to align text horizontally - left, right, center and justified.

    But how do you get text positioned at the top of the panel, at the bottom and in the middle? Neither 'vertical-align' nor 'verticalalign' work.

    What am I not seeing? Anyone?

  2. #2
    Post Impressionist
    Array
    vangogh's Avatar

    Join Date
    Aug 2008
    Location
    Boulder, Colorado
    Posts
    15,061
    Blog Entries
    1

    Default

    vertical-align applies to inline elements. You're probably trying to apply it to a block level element. I'd need to see the rest of your code to offer a solution.
    l Join me as I share my creative process and journey as a writer | StevenBradley.me
    l Design, Development, Marketing, and SEO Tutorials | Steven Bradley's Notebook
    l Get my book about Design Fundamentals

  3. #3
    Registered User
    Array
    Spider's Avatar

    Join Date
    Aug 2008
    Location
    Houston, Texas
    Posts
    3,687

    Default

    Code:
    <div>
    
      <div style="float:right;width:22%;height:120px;padding:10px;background:#a00;color:#e1e79f;font:bold 80% Arial,Helvetica,sans-serif;text-align:left;">
    
      Create your own Wealth Program. You already know how to be wealthy! 
      </div>
    
    </div>

  4. #4
    Post Impressionist
    Array
    vangogh's Avatar

    Join Date
    Aug 2008
    Location
    Boulder, Colorado
    Posts
    15,061
    Blog Entries
    1

    Default

    Is the page in question online by any chance? Is it live on the site? The issue probably isn't in the single line of code, but rather how that code is interacting with the rest.

    Looking at the one line though I'd guess the issue is that this line of text is being floated to the right, which takes it out of the normal document flow. I assume it isn't aligning with something that is in the normal document flow. If you add a margin-top to one or the other you can probably get things to align where you want. You can set the margin-top to be positive or negative too.
    l Join me as I share my creative process and journey as a writer | StevenBradley.me
    l Design, Development, Marketing, and SEO Tutorials | Steven Bradley's Notebook
    l Get my book about Design Fundamentals

  5. #5
    Registered User
    Array
    Spider's Avatar

    Join Date
    Aug 2008
    Location
    Houston, Texas
    Posts
    3,687

    Default

    It's not online, nor is it active. It's pretty isolated as I read the instructions, to see what they do.

    The text is not floated to the right, the panel the text is in is floated to the right. The text itself is aligned to the left within the panel. The problem is that I was trying to get the text to sit midway vertically within the panel, not scrunched up at the top. As in " vertical-align:middle "

  6. #6
    Post Impressionist
    Array
    vangogh's Avatar

    Join Date
    Aug 2008
    Location
    Boulder, Colorado
    Posts
    15,061
    Blog Entries
    1

    Default

    I realize it's the div itself being floated and not the text. Unfortunately vertical-align isn't going to work since you're dealing with a block level element. There are a variety of ways to vertically center block level elements or what's inside of them. Since the div is being floated it's been removed from the normal document flow and shifting the whole div probably won't affect other elements on the page. That's why I suggested using margin-top.

    It's hard to give you a definitive solution though without seeing the page, though.
    l Join me as I share my creative process and journey as a writer | StevenBradley.me
    l Design, Development, Marketing, and SEO Tutorials | Steven Bradley's Notebook
    l Get my book about Design Fundamentals

  7. #7
    Registered User
    Array
    Spider's Avatar

    Join Date
    Aug 2008
    Location
    Houston, Texas
    Posts
    3,687

    Default

    Oh. I was thinking I was not finding the right place to put the vertical-align:middle code. I mean, vertical-align:middle must mean align something vertically inside something else, right?

    So, you think floating the panel is the problem?

  8. #8
    Registered User
    Array
    Spider's Avatar

    Join Date
    Aug 2008
    Location
    Houston, Texas
    Posts
    3,687

    Default

    Okay. In the morning I'll make this up into a simple bit of text inside a box and put it up on the web to see what that tells us. Thanks for your latenight response.

  9. #9
    Post Impressionist
    Array
    vangogh's Avatar

    Join Date
    Aug 2008
    Location
    Boulder, Colorado
    Posts
    15,061
    Blog Entries
    1

    Default

    vertical-align works, but only for inline elements and table cells. There are two kinds of elements in the css visual formatting model, block level elements, and inline level elements. The link takes you to the part of the page talking about block and inline elements.

    When you float or position an element you change how normal elements behave. I'm guessing a little at the float causing your problem based on experience, but it could be other things. CSS and html work together and often the problem you see in css is really the way things are structured in the html. That's sometimes why it can be hard to solve what seems like a css issue.
    l Join me as I share my creative process and journey as a writer | StevenBradley.me
    l Design, Development, Marketing, and SEO Tutorials | Steven Bradley's Notebook
    l Get my book about Design Fundamentals

  10. #10
    Web Consultant
    Array
    Join Date
    Aug 2008
    Location
    Las Vegas
    Posts
    9,852
    Blog Entries
    1

    Default

    Quote Originally Posted by Spider View Post
    The text is not floated to the right, the panel the text is in is floated to the right. The text itself is aligned to the left within the panel. The problem is that I was trying to get the text to sit midway vertically within the panel, not scrunched up at the top. As in " vertical-align:middle "
    A quick way to position text inside the box is by using your padding. If you want to push the text down from the top you an use "padding-top:?px;". If you want to push it away from the sides you can use padding-left or padding-right. Or just use it alone for equal distance within the box.

    <div style="float:right;width:22%;height:120px;backgrou nd:#a00;color:#e1e79f;font:bold 80% Arial,Helvetica,sans-serif;text-align:left; padding-left:20px;">

    Create your own Wealth Program. You already know how to be wealthy!
    </div>">
    You can also use margins.

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
  •