Text align within a div problem

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • mynkow
    New Member
    • Jul 2007
    • 37
    #1

    Text align within a div problem

    Hi all,
    I have a problem with aligning text within a div. I want the text to be aligned at the bottom of the div. What is wrong with his code:
    Code:
    <div style="height:150px; width:200px; line-height:150px; vertical-align:bottom; border:solid 1px red;">
This text should apear at the bottom of the div!
</div>
    Tags: None
    • hsriat
      Recognized Expert Top Contributor
      • Jan 2008
      • 1653
      #2
      Originally posted by mynkow
      Hi all,
      I have a problem with aligning text within a div. I want the text to be aligned at the bottom of the div. What is wrong with his code:
      Code:
      <div style="height:150px; width:200px; line-height:150px; vertical-align:bottom; border:solid 1px red;">
This text should apear at the bottom of the div!
</div>
      there are two things...
      1. You have applied line-height:150px => this will always keep 75 px on both sides of the text. So even if valign=bottom, it will leave 75 px below itself.
      2. it doesn't seem to work with DIV, or even P,
      try it with TABLE

        Comment

        • mynkow
          New Member
          • Jul 2007
          • 37
          #3
          I dont care if I use line-heigth or not. I have to align the text at the bottom of the div. I MUST use div, not a table.
          10x

            Comment

            • Death Slaught
              Top Contributor
              • Aug 2007
              • 1137
              #4
              Try giving it padding.

              [CODE=css]div {
              padding-top:120px;
              }[/CODE]

              Hope it helps, Thanks,
              {\_/}
              (' . ')
              (")[DEATH](")
              (")(")

                Comment

                • mynkow
                  New Member
                  • Jul 2007
                  • 37
                  #5
                  Yes, good answer. How can I miss that? I can if I am trying to do it with vertical-align. Thanks for the answer. So I have another question. In which situations should I use this sh*t vertical-align in divs?

                    Comment

                    • Death Slaught
                      Top Contributor
                      • Aug 2007
                      • 1137
                      #6
                      I've only seen vertical-align used in tables and used to fixed gaps between an image, and other elements. But here's a little information on it.

                      Thanks,
                      {\_/}
                      (' . ')
                      (")[DEATH](")
                      (")(")

                        Comment

                        • drhowarddrfine
                          Recognized Expert Expert
                          • Sep 2006
                          • 7434
                          #7
                          vertical-align is an inline css property and for table cells. divs are block level so it doesn't work there. It's used to align inline text, images, etc. in relation to the baseline or, more specifially, the generated inline box.

                            Comment

                            • drhowarddrfine
                              Recognized Expert Expert
                              • Sep 2006
                              • 7434
                              #8
                              You need to put your text inside an element if you want to position it inside a div. Right now, the text is just part of the div, but if you properly put it in a <p>, as it should be, You could using positioning to place it anywhere inside that div without resorting to padding.

                                Comment

                                • mynkow
                                  New Member
                                  • Jul 2007
                                  • 37
                                  #9
                                  Originally posted by drhowarddrfine
                                  You need to put your text inside an element if you want to position it inside a div. Right now, the text is just part of the div, but if you properly put it in a <p>, as it should be, You could using positioning to place it anywhere inside that div without resorting to padding.
                                  Can you give me an example because I tried as you wrote but still no effect?

                                  Code:
                                  <div style="height:150px; width:200px;vertical-align:middle; border:solid 1px red;">
		<p>text align test</p>
</div>

                                    Comment

                                    • just a feeling
                                      New Member
                                      • Aug 2007
                                      • 86
                                      #10
                                      Originally posted by drhowarddrfine
                                      You need to put your text inside an element if you want to position it inside a div. Right now, the text is just part of the div, but if you properly put it in a <p>, as it should be, You could using positioning to place it anywhere inside that div without resorting to padding.
                                      I guess he drives at this,
                                      [HTML]<div style="height:1 50px; width:200px;ver tical-align:middle; border:solid 1px red; position:relati ve;">
                                      <p style=" bottom:0px; position:absolu te;">This text should apear at the bottom of the div!</p>[/HTML]

                                      Hope it helps,
                                      Rawan.

                                        Comment

                                        • drhowarddrfine
                                          Recognized Expert Expert
                                          • Sep 2006
                                          • 7434
                                          #11
                                          [HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                                          "http://www.w3.org/TR/html4/strict.dtd">
                                          <html>
                                          <head>
                                          <title></title>
                                          <style type="text/css">
                                          div{position:re lative;height:2 00px;width:400p x;outline:1px solid blue}
                                          p{position:abso lute;bottom:0}
                                          </style>
                                          </head>

                                          <body>
                                          <div>
                                          <p>Hello</p>
                                          </div>
                                          </body>
                                          </html>[/HTML]

                                            Comment

                                            • mynkow
                                              New Member
                                              • Jul 2007
                                              • 37
                                              #12
                                              Thank you for the help!

                                                Comment

                                                Previous template Next
                                                Working...