CODEWITHSUNDEEP
htmlimage
aysha
aysha

Reputation: 25

HTML- image layout

I added a picture to my webpage and wanted it to be aligned in the center. I wrote this:

<img src= "kuwait-city.jpg" alt="Kuwait" align="middle" style="width:700px;height:450px;">

but my image would end up on the left. I tried aligning it to the right just to check and it works fine, so I don't know why 'middle' does not work.

how might I fix this problem?

Upvotes: 0

Views: 41

Answers (3)

Kodaloid
Kodaloid

Reputation: 1326

The align attribute in HTML5 is specific to certain tags only, it used to align the content of an HTML tag (not the tag itself), and is mostly for table data, not general layout.

Source: http://w3schools-fa.ir/tags/att_div_align.html

Source: https://www.w3resource.com/html/attributes/html-align-attribute.php

Your code may work if you specify a lower HTML version in your DOCTYPE and HTML tags. However you would be using code that is likely to break in the near future, so I would advise against that.

The modern way of aligning items is to use CSS. There are several techniques you can use, including using text-align: center when your child items have a display of inline or inline-block:

<div style="text-align: center;">
    <img src="kuwait-city.jpg" alt="Kuwait" style="width:700px;height:450px; display:inline;" />
</div>

Using margin: auto, which expands margin on the left and right side making it center align:

<div>
    <img src="kuwait-city.jpg" alt="Kuwait" style="width:700px;height:450px; margin: auto;" />
</div>

And the new flexbox CSS rules in combination with align-items: center:

<div style="display: flex; align-items: center;">
    <img src="kuwait-city.jpg" alt="Kuwait" style="width:700px;height:450px;" />
</div>

There are actually quite a few more CSS techniques you can use, however I believe the above should be enough to get you started.

Upvotes: 0

27px
27px

Reputation: 477

I recommend using CSS for alignment.

img
{
    position:relative;
    top:0;
    left:50%;
    transform:translateX(-50%);
}

or use a flex container in css

<div class="container">
    <img src= "kuwait-city.jpg" alt="Kuwait">
</div>

div.container
{
    width:100%;
    height:auto;
    display:flex;
    flex-direction:row;
    justify-content:center;
}
img
{
    width:700px;
    height:450px;
}

or you can also set margin:0px auto; on the image tag, which basically divides margin equally on both sides which will center the image tag horizontally.

Upvotes: 0

user1438038
user1438038

Reputation: 6059

To center an element horizontally, use the property center:

<div align="center">
  <img src="kuwait-city.jpg" alt="Kuwait" style="width: 700px; height: 450px;">
</div>

The property middle is used for vertical alignment.

Or you can set both, margin-left and margin-right, to the value auto:

<img src="kuwait-city.jpg" alt="Kuwait" style="width: 700px; height: 450px; display: block; margin-left: auto; margin-right: auto;">

This will as well center your image. Note the additional display: block.

There also is a short form to set left and right margin at once:

<img src="kuwait-city.jpg" alt="Kuwait" style="width: 700px; height: 450px; display: block; margin: 0 auto;">

Upvotes: 1

Related Questions