-2

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!

2
  • 1
    can you provide this code in fiddle
    – Jishnu V S
    Commented Nov 17, 2016 at 10:28
  • you could use this two statements vertical-align: middle; text-align: center; Commented Nov 17, 2016 at 10:30

6 Answers 6

5

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%);
}
1

try this css, you have some syntax error and spelling mistake

    .img-sugar{
        max-width: 600px;
        display: block;
        margin: 0 auto;
        text-align: center;
      }

#share-buttons img {
  width: 50px;
  padding: 5px;
  border: 0;
  box-shadow: 0;
  display: inline;
}

.img-sugar{
  max-width: 600px;
  display: block;
  margin: 0 auto;
  text-align: center;
}
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebCam UI</title>

      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link href="assets/css-styles/custom-login-style.css" rel="stylesheet">

</head>

<body>

    <div class="container-fluid">

        <div class="row">

            <div class="col-md-12 text-center">
                     <img class="img-sugar" src="http://placehold.it/350x150"/><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>

</body>

0

If you would insert your img via css it would be easiely done with this here:

.img{ 
    background:url(yourimg.png) center center no-repeat;
}
0

margin: 0 auto you forgot to end with semicolon ;

.img-sugar{
   width: 600px;
   weight: 600px;
   display: block;
   margin: 0 auto;
   text-align: center;
}
0

Use the below mentioned Padding value.

#share-buttons img {
    width: 50px;
    padding: 100px;
    border: 0;
    box-shadow: 0;
    display: inline;
  }
0

try with this code

.img-sugar{
    width: 600px;
    weight: 600px;
    display: block;
    position: absolute;
    vertical-align: center;
    horizontal-align: center;
}

maybe this works?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.