How to align a photo in the center of the page?

Asked

Viewed 3,088 times

0

I know that to align a text you use the text-align: center.

But to align a photo that has a link in it? I did some tests here with some commands that I n know like the align-content, to see if it worked, but it didn’t. I have two questions.

1° How to align a photo that has a link in the center of the page?

2° Is this line right? To later put the alignment code inside it.

 .imagem {}

Edit: I tried to put the margin:auto, in div image, but n worked, n made some change.

Html:

<!DOCTYPE html>
<html>
<head>
    <title>sas</title>
    <link rel="stylesheet" type="text/css" href="sasi.css">
</head>
<body>

    <div class="imagem">

        <a href="#"><img src="https://lh3.googleusercontent.com/l6JAkhvfxbP61_FWN92j4ulDMXJNH3HT1DR6xrE7MtwW-2AxpZl_WLnBzTpWhCuYkbHihgBQ=w640-h400-e365" width="50%" height="50%"></a>

    </div>

</body>
</html>

Css:

.imagem {
    margin:auto; //aplica margem aos quatro lados
    width:200px;
}
html css

  • If the div does not have a set size it will be 100% of the page vertically or 100% of the other div, but since you did not present the full code it is not possible to know what is causing the problem

  • @Markvaaz I put your code in that file, it really didn’t work the margin: center. I changed the image size from 100% to 50%, because 100% of the image was the screen size, and I could not tell if the code to center in the middle of the page would have worked.

  • @Markvaaz Exactly.

  • sasi is the css file? wouldn’t it be sasi.css? and there is no margin center, to center horizontally use margin:auto; or margin:10px auto; 10px to set 10px margin vertically, do not need to be necessarily 10px, you can set the amount you prefer

  • @Markvaaz Yes, I forgot to put the .css. I put agr, but n changed anything. It is the right is margin: self, as you said, I only got confused at the time I wrote the comment. This code I pasted there, you tested to see if it centered in the middle?

  • I changed the answer and put your HTML

Show 1 more comment

1 answer

3


  • You can place the image inside a div define a class for that div and add margin:0 auto at the css to align the image in the center of the page or another div.

Learn more about margin here

Example:

.imagem {
    margin:0 auto; /* margem vertical definida como 0 e horizontal automática */
    width:200px;
}
<!DOCTYPE html>
<html>
<head>
    <title>sas</title>
    <link rel="stylesheet" type="text/css" href="sasi.css">
</head>
<body>

    <div class="imagem">

        <a href="#"><img src="https://lh3.googleusercontent.com/l6JAkhvfxbP61_FWN92j4ulDMXJNH3HT1DR6xrE7MtwW-2AxpZl_WLnBzTpWhCuYkbHihgBQ=w640-h400-e365" width="100%"></a>

    </div>

</body>
</html>

Example with css directly on HTML:

<!DOCTYPE html>
<html>
<head>
    <title>sas</title>
<style type="text/css">
.imagem {
    margin:0 auto; /* margem vertical definida como 0 e horizontal automática */
    width:200px;
}
</style>
</head>
<body>

    <div class="imagem">

        <a href="#"><img src="https://lh3.googleusercontent.com/l6JAkhvfxbP61_FWN92j4ulDMXJNH3HT1DR6xrE7MtwW-2AxpZl_WLnBzTpWhCuYkbHihgBQ=w640-h400-e365" width="100%"></a>

    </div>

</body>
</html>

The 0 in margin:0 auto; represents the vertical value, you can add 50px to set the value vertically, or how many pixels it takes.

Margin example defining different sizes for each side:

margin: 25px 50px 75px 100px;

  • superior is as: 25px
  • right is like: 50px
  • lower is like: 75px
  • left is like: 100px

Note that if the div does not have a size set its value vertically will be 100% of the page or another parent element, if it is 100% cannot center using margin.

  • I know and use the property magin, the basic one at least. I have not ctz if it was you who n understood right, or if it was me. I can align the photo in the center of the page, using the margin, but for that I need to do certain math, not that this is a problem, but I wanted to know if there is how to simplify this. So I was wondering if you can automatically align an image in the center of the page, like text-align. I tried to use the margin: 0 auto; and margin; auto, as you said, but n worked, the image only goes out of place after I put some value inside the margin.

  • As you can see in the snippet and the details of the answer, the margin:0 auto; works perfectly, you are doing something wrong in your code...

  • @Diogenessilva updated the response with the css in the HTML

  • I did, the n image was centering because of that "//applies margin to the four sides" that sentence was on that line. image { margin: 0 auto; //applies margin to all four sides. Help! width:200px; }

  • you were using outdated code... I had already updated the answer

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.