SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Sep 2012
    Location
    Croydon NSW Australia
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Vertically Aligning Text with icons

    Hi all, just a bit stuck on an alignment issue.

    Im trying to align two side by side, separate icons with some preceding text, which will be a link. Both the icons, and the text are in their own classed div, but for the life of me I cant get the text to sit vertically in the middle of the icons height. So, Icon, Icon, text. A small detail, but its eluding me. (My CSS is external). Problem area is under 'read More' at the top. Thanks all Ive tried adjusting line height but all that seems to do is move the icons as well.

    HTML:

    <h2><a href="http://news.drive.com.au/drive/motor-news/holden-cuts-500-jobs-20130408-2hgkg.html" title="Holden cuts 500 jobs" target="new">Read more</a></h2>
    <div class="comments">
    <img src="images/camera_top.gif" width="24" height="24">
    <img src="images/9_comments.gif" width="24" height="24" alt="Comments">
    <h5><a href="http://www.smh.com.au/business/holden-axes-jobs-as-dollar-stings-20130408-2hgpy.html#comments" target="new">Comments</a></h5>
    </div>

    CSS:
    .comments{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: normal;
    color: #F90;
    text-align: left;
    float:left;
    display:inline;
    }

    .comments a {
    color: #F90;
    text-decoration:none;
    vertical-align:text-top;
    }
    Attached Images Attached Images

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

    If you set the images and the anchor to display:inline and not floated nor display:block then you can align them with vertical-align:middle.

    Note that "read more" should not be an h2 as it is not a heading at all but a link. If you wanted emphasis then you could have used strong around the text instead. Also you should not follow an h2 with an h5 tag as heading tags must flow logically and the next step would have been an h3 not an h5 anyway.

    However the h5 is again incorrect in this instance as all you have is a simple link and should not be in a heading tag anyway.

    It should look something like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    .readmore {
    	font-weight:bold;
    	margin:0 0 10px;
    }
    .comments {
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	font-weight: normal;
    	color: #F90;
    	margin:0 0 10px;
    }
    .comments a, .comments a:visited {
    	color: #F90;
    	text-decoration:none;
    }
    .comments img, .comments a {
    	vertical-align:middle;
    	display:inline;
    }
    </style>
    </head>
    
    <body>
    <p class="readmore"><a href="http://news.drive.com.au/drive/motor-news/holden-cuts-500-jobs-20130408-2hgkg.html" title="Holden cuts 500 jobs" >Read more</a></p>
    <p class="comments"> <img src="images/camera_top.gif" width="24" height="24"> <img src="images/9_comments.gif" width="24" height="24" alt="Comments"> <a href="http://www.smh.com.au/business/holden-axes-jobs-as-dollar-stings-20130408-2hgpy.html#comments">Comments</a> </p>
    </body>
    </html>


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
  •