Zentrieren Bild (Logo)

Dies ist das Bild, das ich versuche, zu zentrieren, ich versuchte verschiedene Möglichkeiten, dies zu tun, aber ohne Erfolg ich denke, es mit Bootstrap vor Bestimmung der Position zu tun, und wenn ja, weiß ich nicht, wie Sie es deaktivieren Kann mir jemand helfen mit dieser Ausgabe vielen Dank.Zentrieren Bild (Logo)

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

Quelle

2016-10-26 Unicorn Launcher

Es sieht aus wie, dass die Zeile falsch das Bild zu positionieren .. ist nur sollte <center><img></center> gut funktionieren.

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

Quelle

2016-10-26 12:44:53 Chuunibyu

Der ''

Tag veraltet ist, ich nicht verwenden würde empfehlen. –

Danke für Ihre Hilfe, ich schätze es: D –

@PaulRedmond das war nicht Teil der Frage und ich denke, dass ich die Lösung und den Fehler, der dazu führte, ziemlich gut mit 'center', aber danke, dass Sie das erwähnt haben. @UnicornLauncher es war eine Ehre, denn das war auch meine erste Antwort auf jede Frage auf dieser Website xD – Chuunibyu

The img-responsive nichts tut es links zu beheben. Inhalt fließt normalerweise von links nach rechts, also ist es normal positioniert. Sie können es zentrieren, indem Sie text-align: center; zu seinem übergeordneten Element hinzufügen oder einige Regeln direkt zum Bild hinzufügen. Das ist besser für eine Klasse gemacht, aber hier ist ein Beispiel:

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

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

Quelle

2016-10-26 12:54:33

Danke für Ihre Hilfe, ich schätze es: D –

Sicher, können Sie es bitte korrekt markieren. –

Zentrieren Bild (Logo)

Antwort

Verwandte Themen