How to align 'text' under each image?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • divina11
    New Member
    • Aug 2007
    • 55
    #1

    How to align 'text' under each image?

    How do I align each image text (i.e. <p>image2 text...) directly under the image? So image 'image2 text' would be under image2.jpg and 'image3 text' would be under image3.jpg.

    [HTML]<html>
    <body>

    <img src="image1.jpg "
    width="160" height="100">

    <img src="image2.jpg "
    width="160" height="100">

    <img src="image3.jpg "
    width="160" height="100">

    <p>image1 text

    </body>
    </html>[/HTML]
    Tags: None
    • drhowarddrfine
      Recognized Expert Expert
      • Sep 2006
      • 7434
      #2
      [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">
      p{float:left}
      </style>
      </head>

      <body>

      <img src="1.png">
      <p>text</p>

      </body>
      </html>[/HTML]

        Comment

        • divina11
          New Member
          • Aug 2007
          • 55
          #3
          Still unable to place each text under each image Directly, please see my code below:

          [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">

          p{float:left}

          </style>

          </head>

          <body>

          <img src="test.jpg"w idth="160" height="100">

          <p>image 1 text</p>

          <img src="test.jpg"w idth="160" height="100">

          <p>image 2 text</p>

          <img src="test.jpg"w idth="160" height="100">

          <p>image 3 text</p>
          </body>

          </html>[/HTML]

            Comment

            • Death Slaught
              Top Contributor
              • Aug 2007
              • 1137
              #4
              Originally posted by divina11
              Still unable to place each text under each image Directly, please see my code below:

              [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">

              p{float:left}

              </style>

              </head>

              <body>

              <img src="test.jpg"w idth="160" height="100">

              <p>image 1 text</p>

              <img src="test.jpg"w idth="160" height="100">

              <p>image 2 text</p>

              <img src="test.jpg"w idth="160" height="100">

              <p>image 3 text</p>
              </body>

              </html>[/HTML]
              change the "float: left" to "float: top" and if you want it centered just add margin width to your CSS. Like this


              [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">

              p {float: top; margin-left: 100px;}

              </style>

              </head>

              <body>

              <img src="test.jpg"w idth="160" height="100">

              <p>image 1 text</p>

              <img src="test.jpg"w idth="160" height="100">

              <p>image 2 text</p>

              <img src="test.jpg"w idth="160" height="100">

              <p>image 3 text</p>
              </body>

              </html>[/HTML]


              Hope it helps, Death

                Comment

                • drhowarddrfine
                  Recognized Expert Expert
                  • Sep 2006
                  • 7434
                  #5
                  change the "float: left" to "float: top"
                  There is no such thing as 'float:top'.

                  I only assumed you had the images and text inside some sort of container. If not, then the text float all the way to the left. Here may be a better idea but I don't know if it fits into your scheme:
                  [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">
                  li{list-style-type:none;float :left;}
                  p{text-align:center}
                  </style>
                  </head>

                  <body>

                  <ul>
                  <li><img src="1.png"><p> text</p></li>
                  <li><img src="1.png"><p> text</p></li>
                  </ul>
                  </body>
                  </html>[/HTML]

                    Comment

                    Previous template Next
                    Working...