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

Navigation
0

I know that to align a text is used text-align: center .

But to align a photo that has a link in it? I did tests here with commands that I do not know, like align-content , to see if it worked, but it did not. I have two questions.

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

2nd Is this line right? Then put the alignment code inside it. 

 .imagem {}

Edit: I tried to put the margin:auto , in div of the image, but it did not work, n made any changes.

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;
}
    
asked by anonymous 18.08.2018 / 21:53

1 answer

2
  • You can put the image inside a div set a class for this div and add margin:0 auto to 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 in 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 you need.

Sample margin setting different sizes for each side:

margin: 25px 50px 75px 100px;

  • top is as: 25px
  • right is as: 50px
  • Bottom is as: 75px
  • left is as: 100px
  

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

    
18.08.2018 / 22:00
Search by date in MySQL does not work Matrix NxM (2D) in Python with Numpy