HTML和CSS - 在網站中心圖像

-2

我使用參數的text-align：中心;.圖像的大小是600x600px和我需要在網站上居中水平

我的代碼是：

#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>

在此刻卻顯示：

你能幫幫我嗎？

謝謝！

來源

2016-11-17 ruzD

你能提供這個代碼在小提琴 –

你可以使用這兩個語句vertical-align：middle; text-align：center; – TheWandererr

拉昇.img-sugar CSS驗證碼：

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

來源

2016-11-17 10:31:36 junkfoodjunkie

試試這個CSS，你有一些語法錯誤和拼寫錯誤

.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>

來源

2016-11-17 10:33:06 Rahul

，如果您插入你的IMG通過CSS這將是easie

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

來源

2016-11-17 10:33:12 TheWandererr

嘗試使用此代碼

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

也許這個作品：本立法院這裏做什麼？

來源

2016-11-17 10:34:18

margin: 0 auto您忘記帶分號;

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

來源

2016-11-17 10:35:26

使用下面提到的填充值結束。

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

來源

2016-11-17 10:47:56

HTML和CSS - 在網站中心圖像

回答

相關問題