SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Possitioning text next to an image...

    Okay, I have text next to an image, and automatically the text alligns to the bottom of the image, how can I make it align to the middle?

  2. #2
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    The CSS
    HTML Code:
    div.header {
     		 width: 660px;
     	 height: 30px;
     	 text-align: right;
     	 border-top: 5px solid #B00000;
     	 border-bottom: 1px solid #8A8A8A;	 
     	 background-color: #FFFFFF;
     	 padding: 15px 0px 15px 0px;
     }
    The HTML
    HTML Code:
    <div class="header"><a href="index.htm" class="navi">HOME</a><a href="index.htm" class="navi">PORTFOLIO</a><a href="index.htm" class="navi">ARTICLES</a><a href="index.htm" class="navi">TUTORIALS</a><a href="index.htm" class="navi">FORUM</a><a href="index.htm" class="navir">CONTACT</a><img src="http://www.wv-online.nl/shockedstyle/img/logo.gif"></div>

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Try this:
    Code:
    div.header a, div.header img  {vertical-align:middle}
    Only works as long as the elements are on one single line.

    Paul

  4. #4
    SitePoint Enthusiast Sonjaj's Avatar
    Join Date
    Aug 2004
    Location
    Earth Battalion
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face If you are using HTML, dreamweaver, frontpage etc

    Quote Originally Posted by Yuneek
    Okay, I have text next to an image, and automatically the text alligns to the bottom of the image, how can I make it align to the middle?

    Just insert a table with 2 colomns, put the image in the lefthand side and the text on the righthandside of the divide. Choose 0 borders and no colour if you do not want the borders of the table showing.

    This is if using just HTML or Frontpage, or dreamweaver etc.

  5. #5
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sonjaj
    Just insert a table with 2 colomns, put the image in the lefthand side and the text on the righthandside of the divide. Choose 0 borders and no colour if you do not want the borders of the table showing.

    This is if using just HTML or Frontpage, or dreamweaver etc.
    Lol, no. I'm hand coding a W3C Strict website.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    I've given the answer above! Theres no need for nasty tables lol

  7. #7
    @alexstanford Alex's Avatar
    Join Date
    Apr 2004
    Location
    Jacksonville, Florida
    Posts
    757
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    And your answer worked, thanks a lot mate.

    Now if you would answer this: http://www.sitepoint.com/forums/showthread.php?t=189549 everything would be peachy.


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
  •