7 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

hey guys , check out the below HTML ::

       <ul style="font-size: 10px; cursor: pointer; display: block;" class="links">
          <li>
              <img src="http://www.google.com/s2/favicons?domain=api.jquery.com"
               > 
              <a href="" id="la" style="color: blue; cursor: pointer; background:
              white;">.append() | jQuery API Documentation</a>
          </li>
          <li>
              <img src="http://www.google.com/s2/favicons?
              domain=www.startutorial.com" > 
              <a href="" style="color: blue; cursor: pointer; background: 
              white;">DropzoneJs + PHP: How to build a file upload form </a>
          </li>
       </ul>

and the below CSS ::

              a{
			  vertical-align:top
		    } 

now if all i want to do is align the image vertically to the anchor tag , do i need to make the image display:inline-block ??

Thank you.

Gautam.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi gautamz07, I'd probably

Hi gautamz07,
I'd probably set the line height of the link to the height of the image.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

@Tony out our curiosity

out our curiosity .. why that approach ? over my approach ! , also i guess the line-height centering technique , does't work with multiple lines of text , i'am just curious !

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 6 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

It's a quick fix for that

It's a quick fix for that particular issue.
Probably not the best solution.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

See this

CSS3 offers new properties that afford more elegant solutions, but this article provides some explanations and examples. You may ignore the IE stuff unless supporting obsolete browsers is required.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

@gary Thanks

Thanks gary and tony .

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 4 years 45 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

gary

I have read that article before Laughing out loud

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 weeks 3 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

gautamz07 wrote: I have read

gautamz07 wrote:

I have read that article before Laughing out loud

And then forgot it? Wink Tongue

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.