Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post

    Caption alignment

    Hello

    Is there a reason, please, why the caption is not centered (please see attachment).

    This is the code I have:
    Code:
    <style type="text/css">
    .picture { 
    padding: 2px;
    font: 11px Verdana, Arial; }
    .picture img { 
    vertical-align:middle; margin-bottom: 1px;}
    
    
    a:link {
      
      text-decoration: none;} 
    
    a:visited {
     
      text-decoration: none;} 
    
    a:hover   {
      
      text-decoration: underline;}
    
    </style>
    
    </head>
    <body>
    
    <div class="picture" style="width:216px;"> <img src="Web_chat.gif" width="216" height="154" alt="Chat" /> <br /> 
    
    <a href="default.html" target="popup" onclick="window.open('default.html', 'popup', 'width=450,height=550'); return false">Click for live chat</a></div>
    
    </body>
    I thought the middle alignment would have done it?

    Thanks.
    Attached Thumbnails Attached Thumbnails Caption alignment-co-forum.jpg  

  • #2
    New Coder
    Join Date
    Nov 2010
    Location
    Virginia,USA
    Posts
    36
    Thanks
    1
    Thanked 7 Times in 7 Posts
    You want the caption centered under the image correct? You could just put an align="center" in your a tag for the link.

    If you want it along side the image you could just float the image either left or right in your styles.
    Last edited by badwolf; 05-29-2012 at 12:21 AM.

  • Users who have thanked badwolf for this post:

    SteveH (05-29-2012)

  • #3
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    This did it:

    Code:
    <div class="picture" style="text-align: center;" style="width:216px;"> <img src="Web_chat.gif" width="216" height="154" alt="Chat" /> <br />
    Many thanks!

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You should combine the two style attributes together - or better just apply them as part of either the picture class or as a second class applied to that same tag.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Regular Coder
    Join Date
    Nov 2005
    Posts
    750
    Thanks
    138
    Thanked 1 Time in 1 Post
    Hello felgall

    Yes, this works as well:

    [CODE]<div class="picture" style="text-align: center; width:216px;"><img src="Web_chat.gif" width="216" height="154" alt="Chat" /> <br />

    Thanks a lot.

    Steve


  •  

    Posting Permissions

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