ruzD ruzD - 20 days ago 5
HTML Question

HTML & CSS - Center image in website

I'm trying to center an image but it doesn't works :(

I use the parameter text-align: center;. The size of the image is 600x600px and I need to center horizontal in the website.

My code is:



#share-buttons img {
width: 50px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
.img-sugar{
width: 600px;
height: 600px;
display: block;
margin: 0 auto
text-align: center;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/css-styles/custom-login-style.css" rel="stylesheet">

<div class="container-fluid">
<div class="row">

<div class="col-md-12 text-center">
<img class="img-sugar" src="assets/images/SUGAR.png"/><br><br><br>
</div>

</div>

<div class="row">

<div class="col-md-12 text-center">
<form action="shareimage.php" method="post">
<input class="" type="file" accept="image/*" capture="camera"/>
</form>
</div>

</div>

<div class="row" id="share-buttons">

<div class="col-md-12 text-center">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=https://simplesharebuttons.com&amp;text=Simple%20Share%20Buttons&amp;hashtags=simplesharebuttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
</div>

</div>





At moment it shows:

enter image description here

Could you help me?

Thanks!

Answer

try this code for the .img-sugarCSS:

.img-sugar{
   width: 600px;
   height: 600px;
   display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}