CODEWITHSUNDEEP
htmlcsscenter
Narek
Narek

Reputation: 3823

Make image center without display block

My html:

<p>
    <a href="#">
        <img src="image.png" />
    </a>
</p>

<p>Some text</p>

I want to move image to center without making it block. With block link goes clickable in all width.

Tried:

img{
    margin:0 auto;
    display:inline-block;
}

but it doesn't work.

Fiddle.

Fiddle with centered image but wrong link.

Image width can be different.

Any idea how to make image center and leave clickable area only on image?

Upvotes: 1

Views: 3671

Answers (4)

Ihsahs
Ihsahs

Reputation: 902

try this

<p id="imgPara">
    <a href="#">
        <img id="image" src="http://httpd.apache.org/docs/current/images/feather.gif" />
    </a>
</p>
<p>Some text</p>

#imgPara{
text-align: center;
}

http://jsfiddle.net/Shashi0812/YAusb/

Upvotes: 1

DaniP
DaniP

Reputation: 38252

You can set this CSS for the a tag:

a{
  margin:0 auto;
  display:table;
}

The demo http://jsfiddle.net/9653Y/4/

Upvotes: 1

codingrose
codingrose

Reputation: 15699

Align parent of img to center.

HTML:

<p class="center">
    <a href="#">
        <img src="http://httpd.apache.org/docs/current/images/feather.gif" />
    </a>
</p>

CSS:

.center{text-align:center;}

Here is the updated fiddle.

Upvotes: 0

Roukas
Roukas

Reputation: 36

change margin to 50%

 img{
        margin:0 50%;
        display:inline-block;
    }

Upvotes: -1

Related Questions