Reputation: 9

How do I center an image?

Shouldn't this image be centered? If not, how do I center it?

<div class="logo-area">
<div class="logo-bg">
    <a href="index.html"><img src="images/logo.jpg" align="middle" /></a>
</div>

Upvotes: 1

Answers (7)

Reputation: 2534

On the .logo-area container class make sure it has a width, then apply a margin: 0 auto; to the .logo-bg class.

.logo-area{
  width: 250px;  
 }
.logo-bg{
  width: 0 auto;  
 }

Upvotes: 0

Reputation:

You can use center tag instead of css styling like this,

<div class="logo-area">
  <center><a href="index.html"><img src="images/logo.jpg" align="middle" /></a></center>
</div>

Upvotes: 0

Reputation: 207861

Set text-align:center on the image's parent div.

.logo-bg {
    text-align:center;
}

Upvotes: 2

Reputation: 15394

No, not like that. LIke this:

<div class="logo-bg" style="text-align:center">
    <a href="index.html"><img src="images/logo.jpg" align="middle" /></a>
</div>

(but better to put the style in a style-sheet, of course).

Upvotes: 0

Reputation: 298

align="middle" doesn't exist but align="center" although it's deprecated

Consider using style="text-align : center" instead on the block tag containing the image <div class="logo-bg">

Upvotes: 0

Reputation: 28177

The align tag is deprecated. Use CSS, e.g.

 <img style="margin: 0 auto;" .... />

Upvotes: 1

Reputation: 2169

The align attribute is deprecated and should not be used. Try this instead:

<img src="images/logo.jpg" style="display: block; margin: 0 auto;" />

Upvotes: 4