Adobe Community: Centering Images using CSS but having links on the Images

Currently Being Moderated

1. osgood_,

Aug 8, 2012 3:06 AM in reply to clavin007

Report

Set the container css which houses your image to - text-align: center; - rather tah using display: block; on the image.

|

Mark as:

Currently Being Moderated

2. MurraySummers,

Aug 8, 2012 5:01 AM in reply to clavin007

Report

Because I have set the display to block, the link will span the entire container containing it!

That's incorrect. If the display:block is applied to only the IMAGE, the anchor tag will be exactly the same dimensions as the image and will not fill the container.

|

Mark as:

Currently Being Moderated

3. osgood_,

Aug 8, 2012 5:16 AM in reply to MurraySummers

Report

Murray *ACP* wrote:

Because I have set the display to block, the link will span the entire container containing it!

That's incorrect. If the display:block is applied to only the IMAGE, the anchor tag will be exactly the same dimensions as the image and will not fill the container.

Hi Murray,

Weirdly it does in my experiments. (code below). Even if I set the 'a' tag to the width of the image it still makes the whole <div> container clickable:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

#imgWrapper {

width: 900px;

margin: 0 auto;

border: 1px solid #000;

}

#imgWrapper img {

margin: 0 auto;

display: block;

}

</style>

</head>

<body>

</body>

</html>

|

Mark as:

Currently Being Moderated

4. MurraySummers,

Aug 8, 2012 5:18 AM in reply to osgood_

Report

Well, that's because of the margin:0 auto; style which I forgot about when I penned my reply. Since margin adds to the effective width of the image, you would certainly expect it to be reflected in the size of the wrapping anchor. If that style were not in the rule, then you would see that this is what happens.

|

Mark as:

Currently Being Moderated

5. osgood_,

Aug 8, 2012 5:20 AM in reply to MurraySummers

Report

Murray *ACP* wrote:

you would certainly expect it to be reflected in the size of the wrapping anchor. If that style were not in the rule, then you would see that this is what happens.

yes, sorry it does. I made an error in the css when I tested but adding the below works:

#imgWrapper a {

width: 595px;

margin: 0 auto;

display: block;

}

|

Mark as:

Currently Being Moderated

6. osgood_,

Aug 8, 2012 5:22 AM in reply to MurraySummers

Report

Murray *ACP* wrote:

Well, that's because of the margin:0 auto; style which I forgot about when I penned my reply. Since margin adds to the effective width of the image,

Yes, or course that's easily forgotten when there is 'no' margin added to the image.

|

Mark as:

Currently Being Moderated

7. clavin007,

Aug 8, 2012 11:39 PM in reply to MurraySummers

Report

Hi Murray,

Thanks for your prompt reply. What I had done is that I have created a class style called .centraliseItem and apply to the image like so :

.centraliseItem{

margin: 0 auto;

display:block;

}

I have essentially applied the display:block the the image item but still the link applies to the surrounding elements.

Accordingly to what you had mentioned since you mentioned I have to apply display:block to the image, I had even went to the extent of changing to inline style like so :

to no avail.

Sorry, but I am still clueless!

Regards,

James

|

Mark as:

Currently Being Moderated

8. clavin007,

Aug 8, 2012 11:53 PM in reply to osgood_

Report

Hi osgood_,

Thanks for your reply.

Again, I have tried your recommendation and it works. However, I've noticed that you have the CSS applied to the anchor which is fine. The problem comes in when I want to centralise images with differing widths yet having the links applied to only the images and not the surrounding elements. There is no way I have to create multiple styles for differing widths!

For example, I cannot create like one that you had suggested :

#imgWrapper a {

width: 595px;

margin: 0 auto;

display: block;

}

Then I have another image of a width of 400px or for that matter 350px, it wouldn't be centralised anymore.

I guess the problem stems from the fact that in CSS, in order to centralise an item, we have to change the display to block which in actual fact it is an inline graphic which allows an image to be clickable and not the surrounding areas.

Do you have another solution?

Thanks!

|

Mark as:

Currently Being Moderated

9. osgood_,

Aug 9, 2012 1:15 AM in reply to clavin007

Report

Just use text-align: center; on the <div> to horizontally center your images:

#myImage {

width: 500px;

text-align: center;

}

|

Mark as:

Currently Being Moderated

10. clavin007,

Aug 9, 2012 7:14 PM in reply to osgood_

Report

Hi osgood_,

Thanks for your help. Yes, it works if I do a text-align:center to the wrapping div. However, are there any more solutions apart from this?

This method is basically for centering text itself, though I have to say it works for an image or any items within the div.

|

Mark as:

Dreamweaver

Centering Images using CSS but having links on the Images

Aug 8, 2012 2:48 AM

More Like This

Bookmarked By (0)

Answers + Points = Status