Wie zentriert man ein Bild horizontal innerhalb eines div-Elements?

Question

Wie zentriert man ein Bild horizontal innerhalb eines div-Elements?

Gefragt el 12 de Juni, 2012: Wann wurde die Frage gestellt
989135 Ansichten: Anzahl der Besuche der Frage
5 Antworten: Anzahl der Fragenantworten
Gelöst: Aktueller Status der Frage

Wie kann ich ein Bild innerhalb seines Container-Divs mittig (horizontal) ausrichten?

Hier ist das HTML und CSS. Ich habe auch das CSS für die anderen Elemente des Thumbnails beigefügt. Es läuft in absteigender Reihenfolge, so dass das höchste Element ist der Container von allem und das niedrigste ist innerhalb alles.

#thumbnailwrapper {
      color: #2A2A2A;
      margin-right: 5px;
      border-radius: 0.2em;
      margin-bottom: 5px;
      background-color: #E9F7FE;
      padding: 5px;
      border: thin solid #DADADA;
      font-size: 15px
}

#artiststhumbnail {
      width: 120px;
      height: 108px;
      overflow: hidden;
      border: thin solid #DADADA;
      background-color: white;
}

#artiststhumbnail:hover {
      left: 50px
}

<!--link here-->

<a href="NotByDesign">
  <div id="thumbnailwrapper">

    <a href="NotByDesign">

      <!--name here-->
      <b>Not By Design</b>
      <br>

      <div id="artiststhumbnail">

        <a href="NotByDesign">

          <!--image here-->
          <img src="../files/noprofile.jpg" height="100%" alt="Not By Design" border="1" />
        </a>
      </div>

      <div id="genre">Punk</div>

  </div>

Okay, ich habe das Markup ohne PHP eingefügt, damit es besser zu sehen ist. Beide Lösungen scheinen in der Praxis nicht zu funktionieren. Der Text oben und unten kann nicht zentriert werden und das Bild sollte in seinem Container-Div zentriert werden. Der Container hat Überlauf versteckt, so dass ich die Mitte des Bildes zu sehen, wie das ist normalerweise, wo der Fokus ist.

Gefragt el 12 de Juni, 2012 von Jacob Windsor

Answer 1

5 Antworten

Answer 2

1voto

Santosh Khalse Punkte 10598

Sie können Ihren Inhalt mit Flexbox mit minimalem Code ausrichten

HTML

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

CSS

.image-container{
  width:100%;
  background:green;
  display:flex;

.image-container{
  width:100%;
  background:green;
  display:flex;
  justify-content: center;
  align-items:center;
}

<div class="image-container">
<img src="https://image.freepik.com/free-vector/modern-abstract-background_1048-1003.jpg" width="100px"> 
</div>

js fiddle link https://jsfiddle.net/7un6ku2m/

Beantwortet el 19 de Dezember, 2016 von Santosh Khalse (10598 Punkte )

Answer 3

0voto

SherylHohman Punkte 14230

Wenn Sie dies inline tun müssen (z. B. bei Verwendung eines Eingabefeldes),
hier ist ein schneller Hack, der bei mir funktioniert hat: umgeben Sie Ihre (Bild-Link in diesem Fall)
in einem div con style="text-align:center"

<div style="text-align:center">

<a title="Example Image: Google Logo" href="https://www.google.com/" 
target="_blank" rel="noopener"><img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Google Logo. Click to visit Google.com" border="0" data-recalc-dims="1" /></a>

<h6><strong>This text will also be centered </strong></h6>

</div> /* ends centering style */

Beantwortet el 11 de Juli, 2017 von SherylHohman (14230 Punkte )

Answer 4

0voto

Nick GM Punkte 1

.document {
  align-items: center;
  background-color: hsl(229, 57%, 11%);
  border-radius: 5px;
  display: flex;
  height: 40px;
  width: 40px;
}

.document img {
  display: block;
  margin: auto;
}

<div class="document">
  <img src="./images/icon-document.svg" alt="icon-document" />
</div>

Beantwortet el 21 de Juni, 2020 von Nick GM (1 Punkte )

Answer 5

-1voto

Siva Kaliyamoorthy Punkte 29

##Both Vertically and Horizontally center of the Page
.box{
    width: 300px;
    height: 300px;
    background-color: #232532;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

Beantwortet el 15 de Februar, 2018 von Siva Kaliyamoorthy (29 Punkte )

Answer 6

-1voto

KES NORKUS Punkte 1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

      <style>
      body{
  /*-------------------important for fluid images---\/--*/
  overflow-x: hidden; /* some browsers shows it for mysterious reasons to me*/
  overflow-y: scroll;
  margin-left:0px;
  margin-top:0px;
  /*-------------------important for fluid images---/\--*/
      }
      .thirddiv{
      float:left;
      width:100vw;
      height:100vh;
      margin:0px;
      background:olive;
      }
      .thirdclassclassone{
      float:left;   /*important*/
      background:grey;
      width:80vw;
      height:80vh; /*match with img height bellow*/
      margin-left:10vw; /* 100vw minus "width"/2    */
      margin-right:10vw; /* 100vw minus "width"/2   */
      margin-top:10vh;
      }
      .thirdclassclassone img{
      position:relative; /*important*/
     display: block;  /*important*/
    margin-left: auto;  /*very important*/
    margin-right: auto;  /*very important*/
    height:80vh; /*match with parent div above*/

    /*--------------------------------
    margin-top:5vh;
    margin-bottom:5vh;
    ---------------------------------*/
    /*---------------------set margins to match total  height of parent di----------------------------------------*/
      }
    </style>           
</head>  
<body>
    <div class="thirddiv">
       <div class="thirdclassclassone">
       <img src="ireland.png">
    </div>      
</body>
</html>

Beantwortet el 17 de April, 2016 von KES NORKUS (1 Punkte )

Wie zentriert man ein Bild horizontal innerhalb eines div-Elements?

Antworten

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by:

Wie zentriert man ein Bild horizontal innerhalb eines div-Elements?

Antworten

Verwandte Fragen

Empfohlene Fragen

Top-Tags

CodeJaeger.com

Powered by: