Question

这是我试图居中的形象，我尝试了不同的方法来做到这一点但没有成功我认为它与bootstrap预先确定位置，如果是这样我不知道如何禁用它可以任何人帮助我这个问题非常感谢。

      <div class="container">
             <div class="row">
                 <div class="col-md-5">
        <!--      <img src="../images/4uSupportLogo.png" class="" height="250px"/> -->
                   <br> </br>  
               <!-- <img src="../images/4uSupportLogo.png" alt="Logo" align="top" width="300" height="200"  </br> -->
                      <!--   <img src="../images/4uSupportLogo.png" width="300" height="200" style="display:block; margin-left:auto;
 margin-right: auto;" align="center" /> -->
                 <center>  <img src="../images/4uSupportLogo.png" class="img-responsive" width="300" height="200"> </center>


               <br> </br>  

         </div>
       </div>
     </div>


     <div class="container">
         <div class="row">
             <div class=" col-md-12 well text-center">
                 <h4><i><strong>The Username or Password is incorrect please try again.</strong></i></h4>
               <p>
                   If you have forgot your password and would like to reset it please contact Jack </p>

               <input type="button" 
                      value="Request New Password" 
                      onclick="location='../forgot_password/forgot.php'" />




               </div>

             </div>
         </div>

Answer 1

看起来该行只是错误地定位图像。<center><img></center>应该可以正常工作。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Image</h2>
  <p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>                  
  <center><img src="https://media.giphy.com/media/l0HlSYVgZLQ1Y4GdO/giphy.gif" class="img-responsive" alt="Cinque Terre" width="304" height="236"></center><br><br>
<img src="https://media.giphy.com/media/l0HlSYVgZLQ1Y4GdO/giphy.gif" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>

</body>
</html>

Source

Answer 2

img-responsive并没有做任何事情来解决它。内容通常从左到右流动，因此它正常定位。您可以通过在其父元素上添加text-align: center;或直接向图像添加一些规则来居中。这在课堂上做得更好，但这是一个例子：

img {
  display: block;
  margin: 0 auto;
}

http://codepen.io/paulcredmond/pen/RGOKwr

居中图像（徽标）

2 个答案: