it-swarm.com.de

Bild horizontal innerhalb eines Bereichs zentrieren

Dies ist wahrscheinlich eine blöde Frage, aber da die üblichen Möglichkeiten, ein Bild in der Mitte auszurichten, nicht funktionieren, dachte ich, ich würde fragen. Wie kann ich ein Bild in seinem Container div zentrieren (horizontal)?

Hier sind HTML und CSS. Ich habe auch das CSS für die anderen Elemente der Miniaturansicht eingefügt. Es läuft in absteigender Reihenfolge ab, also ist das höchste Element der Container von allem und das niedrigste ist in allem.

#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 hinzugefügt und sollte daher besser zu sehen sein. Keine der Lösungen scheint in der Praxis zu funktionieren. Der Text oben und unten kann nicht zentriert werden und das Bild sollte innerhalb des Container-Divs zentriert sein. Der Container hat einen ausgeblendeten Überlauf, daher möchte ich die Bildmitte so sehen, wie es normalerweise der Fokus ist.

315
Jacob Windsor

Der CSS-Typ schlägt Folgendes vor:

Also beim Übersetzen vielleicht:

#artiststhumbnail a img {
    display:block;
    margin:auto;
}

Hier ist meine Lösung in: http://jsfiddle.net/marvo/3k3CC/2/

704
Marvo

Ich habe diese Lösung unten auf der W3-CSS-Seite gefunden und sie hat mein Problem gelöst.

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Quelle: http://www.w3.org/Style/Examples/007/center.de.html

60
mk.hd

CSS flexbox kann dies mit justify-content: center im übergeordneten Bildelement tun.

HTML

<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

CSS

.image-container {
  display: flex;
  justify-content: center;
}

Ausgabe:

body {
  background: lightgray;
}
.image-container {
  width: 200px;
  display: flex;
  justify-content: center;
  margin: 10px;
  padding: 10px;
  /* Material design properties */
  background: #fff;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.image-2 {
  width: 500px;
}
.image-3 {
  width: 300px;
}
<div class="image-container">
  <img src="http://placehold.it/100x100" />
</div>

<div class="image-container image-2">
  <img src="http://placehold.it/100x100/333" />
</div>

<div class="image-container image-3">
  <img src="http://placehold.it/100x100/666" />
</div>

52
Manoj Kumar

Das würde es auch tun

#imagewrapper {
    text-align:center
}

#imagewrapper img {
    display:inline-block;
    margin:0 5px
}
16
Mehmet Yaden

Das Beste, was ich gefunden habe (was in allen Browsern zu funktionieren scheint), um ein Bild oder ein Element horizontal zu zentrieren, ist das Erstellen einer CSS-Klasse und die folgenden Parameter:

CSS

.center {
    position: relative;          /* where the next element will be automatically positioned */
    display: inline-block;       /* causes element width to shrink to fit content */
    left: 50%;                   /* moves left side of image/element to center of parent element */
    transform: translate(-50%);  /* centers image/element on "left: 50%" position */
}

Sie können dann die von Ihnen erstellte CSS-Klasse wie folgt auf Ihr Tag anwenden:

HTML

<img class="center" src="image.jpg" />

Sie können das CSS auch in Ihren Elementen einbetten, indem Sie folgende Schritte ausführen:

<img style="position: relative; display: inline-block; left: 50%; transform: translate(-50%);" src ="image.jpg" />

... aber ich würde nicht empfehlen, CSS inline zu schreiben, da Sie dann unter Verwendung Ihres zentrierenden CSS-Codes mehrere Änderungen an allen Tags vornehmen müssen, wenn Sie den Stil ändern möchten. 

12
Kevin

Das habe ich beendet:

<div style="height: 600px">
   <img src="assets/zzzzz.png" alt="Error" style="max-width: 100%; 
        max-height: 100%; display:block; margin:auto;" />
</div>

Dadurch wird die Bildhöhe auf 600px begrenzt und horizontal (oder verkleinert, wenn die übergeordnete Breite kleiner ist) zum übergeordneten Container zentriert, wobei die Proportionen beibehalten werden.

10
Cherno

Ich werde in aller Ruhe gehen und sagen, dass das Folgende das ist, was Sie suchen. 

Beachten Sie, dass das Folgende meiner Meinung nach in der Frage versehentlich weggelassen wurde (siehe Kommentar):

<div id="thumbnailwrapper"> <!-- <<< This opening element -->
    <div id="artiststhumbnail">
...

Was Sie brauchen, ist:

#artiststhumbnail {
    width:120px;
    height:108px;
    margin: 0 auto; /* <<< This line here. */
    ...
}

http://jsfiddle.net/userdude/XStjX/3/

7
Jared Farrish

um ein Bild horizontal zu zentrieren, funktioniert dies 

<p style="text-align:center"><img src=""></p>
3

Fügen Sie dies Ihrem CSS hinzu

#artiststhumbnail,img {
      margin-left:auto;
      margin-right:auto;
    }

Es wird lediglich auf ein untergeordnetes Element verwiesen, das in diesem Fall das Bild ist.

3
Bishop

Setzen Sie eine gleiche Pixelfüllung für links und rechts:

<div id="artiststhumbnail" style="padding-left:ypx;padding-right:ypx">
2
V-SHY

Ich habe einige Möglichkeiten ausprobiert. Aber dieser Weg funktioniert perfekt für mich

<img src="~/images/btn.png" class="img-responsive" id="hide" style="display: block; margin-left: auto; margin-right: auto;" />
1
Ifwat Ibrahim

Legen Sie das Bild in eine newDiv. Stellen Sie die Breite des enthaltenden div auf die gleiche Größe wie das Bild Übernehmen Sie margin: 0 auto; auf das newDiv. Das sollte div innerhalb des Containers zentrieren.

1
Setu

sie können Ihre Inhalte mithilfe der 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/

1
Santosh Khalse

Zentriere ein Bild in einem div

/* standar */
div, .flexbox-div {
  position: relative;
  width: 100%;
  height: 100px;
  margin: 10px;
  background-color: grey;  
}

img {
  border: 3px solid red;
  width: 75px;
  height: 75px;
}
/* || standar */


/* transform */
.transform {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
}
/* || transform */


/* flexbox margin */
.flexbox-div {
  display: -webkit-flex;
  display: flex;
  background-color: lightgrey; 
}

.margin-img {
  margin: auto;
}
/* || flexbox margin */


/* flexbox justify align */
.flexbox-justify {
  justify-content: center;
}

.align-item {
  align-self: center;
}
/* || flexbox justify align */
<h4>Using transform </h4>  
<div>
  <img class="transform" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox margin</h4>  
<div class="flexbox-div">
  <img class="margin-img" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

<h4>Using flexbox justify align</h4>  
<div class="flexbox-div flexbox-justify">
  <img class="align-item" src="http://placeholders.org/250/000/fff" alt="Not By Design" border="1" />
</div>

1
antelove

Positionierung verwenden. Folgendes funktionierte für mich ... (horizontal und vertikal zentriert)

Mit Zoom auf die Bildmitte (Bild füllt das div):

div{
    display:block;
    overflow:hidden;
    width: 70px; 
    height: 70px;  
    position: relative;
}
div img{
    min-width: 70px; 
    min-height: 70px;
    max-width: 250%; 
    max-height: 250%;    
    top: -50%;
    left: -50%;
    bottom: -50%;
    right: -50%;
    position: absolute;
}

Ohne Zoom auf die Bildmitte (Bild macht nicht div füllen)

   div{
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }
1
FinkAvenue

Um die Frage einfach zu beantworten, müssen Sie ein Wrapper um ein Unterelement haben. 

Der Wrapper weist das Unterelement der Grenzen an, innerhalb zu arbeiten.

  • position : relativ;
     relativ Das Element ist relativ zu seiner normalen Position positioniert. "Left: 20px" fügt der LEFT-Position des Elements 20
  • Anzeige : Block oder Inline-Block;
     block Zeigt ein Element als Blockelement an. Es beginnt in einer neuen Zeile und nimmt die gesamte Breite ein

     inline-Block Zeigt ein Element als Blockcontainer auf Inline-Ebene an. Das Element selbst ist als Inline-Element formatiert. Sie können jedoch Höhen- und Breitenwerte anwenden.
  • min-Höhe oder min-Breite : (x) px;

Das Unterelement innerhalb muss sich gemäß den vom Wrapper festgelegten Regeln verhalten.

  • position : absolut;
     absolut Das Element wird relativ zu seinem ersten positionierten (nicht statischen) Vorfahrenelement .__ positioniert.
  • Anzeige : Block oder Inline-Block;
     block Zeigt ein Element als Blockelement an. Es beginnt in einer neuen Zeile und nimmt die gesamte Breite ein

     inline-Block Zeigt ein Element als Blockcontainer auf Inline-Ebene an. Das Element selbst ist als Inline-Element formatiert. Sie können jedoch Höhen- und Breitenwerte anwenden.
  • min-Höhe oder min-Breite : (x) px;
  • margin : auto;  auto Der Browser berechnet einen Rand
  • top : 0;   Legt die Position der oberen Kante in px, cm usw. fest.
  • bottom : 0;   Legt die Position der unteren Kante in px, cm usw. fest.
  • links : 0;   Legt die Position der linken Kante in px, cm usw. fest.
  • rechts : 0;   Legt die rechte Kantenposition in px, cm usw. fest.

Die Anweisung von oben, unten, links, rechts im position: absolut mit marge auto, nimmt die berechnete Differenz aller Kanten und das Unterelement verhält sich innerhalb seines Wrapperelements. 

.Image-Container {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  background-image: -webkit-linear-gradient(left, #fd2853, #f55b17 20%, #fad500 40%, #3fe9d1 60%, #b93fe9);
  background-image: -moz-linear-gradient(left, #fd2853, #f55b17 20%, #fad500 40%, #3fe9d1 60%, #b93fe9);
  background-image: -o-linear-gradient(left, #fd2853, #f55b17 20%, #fad500 40% #3fe9d1 60%, #b93fe9);
  background-image: linear-gradient(to right, #fd2853, #f55b17 20%, #fad500 40%, #3fe9d1 60%, #b93fe9);
  border: 3px dashed #fff;
}

.Image-Container img {
  position: absolute;
  display: inline-block;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
<div class='Image-Container'>
  <img src='http://www.freedigitalphotos.net/images/img/homepage/usa-travel-1-bottom-15226.jpg'>
</div>

0
Matthew Egan

Wenn Sie dies inline tun müssen (z. B. wenn Sie ein Eingabefeld verwenden),
hier ist ein schneller hack, der für mich funktioniert hat: umschließen Sie Ihren (Bildlink in diesem Fall)
in einer div mit 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 */
0
SherylHohman