センタリングイメージ（ロゴ）

これは中心にしようとしているイメージですが、これを行うためにさまざまな方法を試しましたが、成功しなかったと私は考えています。誰もこの問題で多くのおかげで私を助けることができます。センタリングイメージ（ロゴ）

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

出典

2016-10-26 Unicorn Launcher

それは、行だけで誤って画像を配置していることのように見える... <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

出典

2016-10-26 12:44:53 Chuunibyu

タグが推奨されていません、私はそれを使用してお勧めしません。 –

助けてくれてありがとう私はそれを感謝します：D –

@PaulRedmondは質問の一部ではありませんでした。私は解決策とエラーを示したと思います。 @UnicornLauncherこれは私の最初の答えであり、このウェブサイトのこれまでの質問に対する私の最初の答えでもありました。xD – Chuunibyu

img-responsiveは、それが残って修正するために何もしていません。コンテンツは左から右に正常に流れるため、通常は配置されます。親要素にtext-align: center;を追加するか、画像に直接いくつかの規則を追加することで、その要素を中央に配置できます。これは、より良いクラスで行われますが、ここでは一例ですされています

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

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

出典

2016-10-26 12:54:33

私はそれを感謝してくれてありがとう：D –

確かに、それを正しくマークしてください。 –

センタリングイメージ（ロゴ）

答えて

関連する問題