it-swarm.com.de

So erstellen Sie eine Bildmitte (vertikal und horizontal) in einem größeren Div

Ich habe eine div 200 x 200 px. Ich möchte ein 50 x 50 px großes Bild direkt in der Mitte des Div platzieren.

Wie geht das?

Ich kann es horizontal zentrieren, indem ich text-align: center für das div benutze. Aber vertikale Ausrichtung ist das Problem ..

392
Shameem

Persönlich würde ich es als Hintergrundbild innerhalb des div platzieren, das CSS dafür ist:

#demo {
    background: url(bg_Apple_little.gif) no-repeat center center;
    height: 200px;
    width: 200px;
}

(Angenommen, ein Div mit id="demo", da Sie bereits height und width angeben, und das Hinzufügen eines background sollte kein Problem darstellen.)

Lassen Sie den Browser die Anstrengung nehmen.

317
bochgoch

Arbeiten in alten Browsern (IE> = 8)

Die absolute Position in Kombination mit dem automatischen Rand ermöglicht das horizontale und vertikale Zentrieren eines Elements. Die Elementposition könnte auf einer übergeordneten Elementposition unter Verwendung einer relativen Positionierung basieren. Ergebnis anzeigen

img {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
405

eine andere Möglichkeit besteht natürlich darin, mit table ein valign zu erstellen. Dies würde funktionieren, unabhängig davon, ob Sie die Größe des Div kennen oder nicht.

<div>
   <table width="100%" height="100%" align="center" valign="center">
   <tr><td>
      <img src="foo.jpg" alt="foo" />
   </td></tr>
   </table>
</div>

aber du solltest dich immer an css halten, wann immer es möglich ist.

104
andyk

Ich würde dein größeres div mit position:relative; setzen, dann für dein Bild:

img.classname{
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-25px;
   margin-left:-25px;
}

Dies funktioniert nur, weil Sie die Abmessungen des Bildes und des enthaltenen Div kennen. Auf diese Weise können Sie auch andere Elemente innerhalb des übergeordneten Bereichs haben, bei denen Lösungen wie die Verwendung der Zeilenhöhe dies nicht tun.

EDIT: Hinweis ... Ihre Ränder entsprechen der Hälfte der Bildgröße.

77
Tim Knight

Das funktioniert richtig:

display: block;
margin-left: auto;
margin-right: auto 

andernfalls versuchen Sie dies, wenn Sie mit dem oben genannten Verfahren nur eine horizontale Zentrierung erhalten:

.outerContainer {
   position: relative;
}

.innerContainer {
   width: 50px; //your image/element width here
   height: 50px; //your image/element height here
   overflow: auto;
   margin: auto;
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
}
57
Chris

hier ist eine andere Methode, um alles in irgendetwas zu zentrieren.

Working Fiddle

HTML: (einfach wie immer)

<div class="Container">
    <div class="Content"> /*this can be an img, span, or everything else*/
        I'm the Content
    </div>
</div>

CSS:

.Container
{
    text-align: center;
}

    .Container:before
    {
        content: '';
        height: 100%;
        display: inline-block;
        vertical-align: middle;
    }

.Content
{
    display: inline-block;
    vertical-align: middle;
}

Leistungen

Die Container- und Inhaltshöhe sind unbekannt.

Das Zentrieren ohne bestimmten negativen Rand, ohne Festlegen der Zeilenhöhe (damit es gut mit mehreren Textzeilen funktioniert) und ohne ein Skript funktioniert auch hervorragend mit CSS-Übergängen.

38
avrahamcool

Das kommt ein bisschen spät, aber hier ist eine Lösung, mit der ich Elemente innerhalb eines übergeordneten Div vertikal ausrichte.

Dies ist nützlich, wenn Sie die Größe des Container-Div kennen, aber nicht die des enthaltenen Bildes. (Dies ist häufig der Fall, wenn Sie mit Leuchtkästen oder Bildkarussellen arbeiten).

Hier ist das Styling, das du ausprobieren solltest:

 container div
 {
   display:table-cell;
   vertical-align:middle;

   height:200px;
   width:200px;
 }

 img
 {
   /*Apply any styling here*/        
 }
29
Kshitij Chopra

Verwenden Sie Flexbox :

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* Centering y-axis */
  align-items :center; /* Centering x-axis */
}
20
Rahul Paru

Ich habe festgestellt, dass die obigen Antworten von Valamas und Lepu die einfachsten sind, die sich auf Bilder mit unbekannter Größe oder bekannter Größe beziehen, die Sie lieber nicht in Ihr CSS einprogrammieren möchten. Ich habe nur ein paar kleine Verbesserungen vorgenommen: Entfernen Sie irrelevante Stile, passen Sie die Größe auf 200px an die Frage an und fügen Sie max-height/max-width hinzu, um Bilder zu verarbeiten, die möglicherweise zu groß sind.

div.image-thumbnail
{
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
    max-height: 200px;
    max-width: 200px;
}
20
svachalek

in der div

style="text-align:center; line-height:200px"
13
Scott Evernden

Die vertikale Ausrichtung ist einer der am häufigsten missbrauchten CSS-Stile. Es funktioniert nicht so, wie Sie es von Elementen erwarten würden, die nicht td's oder css "display: table-cell" sind.

Dies ist ein sehr guter Beitrag zu diesem Thema. http://phrogz.net/CSS/vertical-align/index.html

Die gebräuchlichsten Methoden, um das zu erreichen, wonach Sie suchen, sind:

  • polsterung oben/unten
  • position absolut
  • zeilenhöhe
12
Alex

In CSS verfahren Sie wie folgt:

img
{

  display:table-cell;
  vertical-align:middle;
  margin:auto;
}
11
Code Breaker

@sleepy Mit den folgenden Attributen können Sie dies ganz einfach tun:

#content {
  display: flex;
  align-items: center;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

#myImage {
  display: block;
  width: 50px;
  height: 50px;  
  margin: auto;
  border: 1px solid yellow;
}
<div id="content">
  <img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>

Referenzen: W

9
petersonfortes

Normalerweise setze ich line-height auf 200px. Macht normalerweise den Trick.

8
Triptych

Ich habe eine Bildergalerie, für die ich die genauen Höhen oder Breiten der Bilder nicht vorher kenne. Ich weiß nur, dass sie kleiner sind als der Div, in dem sie enthalten sein werden.

Durch die Kombination von Zeilenhöhe -Einstellungen für den Container und vertikale Ausrichtung: Mitte für das Bildelement konnte ich es schließlich für FF 3.5, Safari 4.0, verwenden und IE7.0 unter Verwendung des folgenden HTML-Markups und des folgenden CSS.

Das HTML-Markup

<div id="gallery">
    <div class="painting">
        <a href="Painting/Details/2">
            <img src="/Content/Images/Paintings/Thumbnail/painting_00002.jpg" />
        </a>
    </div>
    <div class="painting">
        ...
    </div>
    ...
 </div>

Das CSS

div.painting
{
    float:left;

    height:138px; /* fixed dimensions */
    width: 138px;

    border: solid 1px white;
    background-color:#F5F5F5;


    line-height:138px;    
    text-align:center;

}

    div.painting a img
    {
        border:none;
        vertical-align:middle;

    }
8
Diego Tercero

Das funktioniert bei mir:

<body>
  <table id="table-foo">
    <tr><td>
        <img src="foo.png" /> 
    </td></tr>
  </table>
</body>
<style type="text/css">
  html, body {
    height: 100%;
  }
  #table-foo {
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: middle;
  }
  #table-foo img {
    display: block;
    margin: 0 auto;
  }
</style>
6
Alain Beauvois

Ein anderer Weg (hier noch nicht erwähnt) ist mit Flexbox .

Legen Sie einfach die folgenden Regeln für den Container div fest:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

GEIGE

div {
  width: 200px;
  height: 200px;
  border: 1px solid green;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div>
  <img src="http://lorempixel.com/50/50/food" alt="" />
</div>

Ein guter Ort, um mit Flexbox zu beginnen, um einige seiner Funktionen zu sehen und Syntax für maximale Browserunterstützung zu erhalten, ist flexyboxes

Auch die Browser-Unterstützung ist heutzutage recht gut: caniuse

Für die browserübergreifende Kompatibilität von display: flex und align-items können Sie Folgendes verwenden:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
6
Danield

Dies ist eine alte Lösung aber die Marktanteile von Browsern sind so weit fortgeschritten, dass Sie möglicherweise ohne den Hack-Teil IE auskommen, wenn Sie sich keine Sorgen über eine Verschlechterung für IE7 machen. Dies funktioniert, wenn Sie die Abmessungen des äußeren Containers kennen, die Abmessungen des inneren Bilds jedoch möglicherweise nicht kennen.

.parent {
    display: table;
    height: 200px; /* can be percentages, too, like 100% */
    width: 200px; /* can be percentages, too, like 100% */
}

.child {
    display: table-cell;
    vertical-align: middle;
    margin: 0 auto;
}
 <div class="parent">
     <div class="child">
         <img src="foo.png" alt="bar" />
     </div>
 </div>
5
joshuahedlund

Wir können dies leicht mit flex erreichen. keine Notwendigkeit für background-image.

<!DOCTYPE html>
<html>
<head>
   <style>
      #image-wrapper{
         width:500px;
         height:500px;
         border:1px solid #333;
         display:flex;
         justify-content:center;
         align-items:center;
      }
   </style>
</head>
<body>

<div id="image-wrapper">
<img id="myImage" src="http://blog.w3c.br/wp-content/uploads/2013/03/css31-213x300.png">
</div>

</body>
</html>
5
codegeek

einfach

img {
    transform: translate(50%,50%);
}
4
ctf0

Sie können ein Bild mit dem folgenden Code horizontal und vertikal zentrieren (funktioniert in IE/FF). Der obere Bildrand wird genau auf 50% der Browserhöhe eingestellt, und der obere Rand (halbe Bildhöhe nach oben ziehen) zentriert das Bild perfekt.

<style type="text/css">
    #middle {position: absolute; top: 50%;} /* for Explorer only*/
    #middle[id] {vertical-align: middle; width: 100%;}
         #inner {position: relative; top: -50%} /* for Explorer only */
</style>


<body style="background-color:#eeeeee">
    <div id="middle">
        <div id="inner" align="center" style="margin-top:...px"> /* the number will be half the height of your image, so for example if the height is 500px then you will put 250px for the margin-top */
            <img src="..." height="..." width="..." />
        </div>
    </div>
</body>
3
Thach

Ich habe versucht, ein Bild mit hmtl und css vertikal und horizontal in einer Kreisform zu zentrieren.

Nachdem ich einige Punkte aus diesem Thread kombiniert habe, habe ich mir Folgendes ausgedacht: jsFiddle

Hier ist ein weiteres Beispiel dafür in einem dreispaltigen Layout: jsFiddle

CSS:

#circle {
width: 100px;
height: 100px;
background: #A7A9AB;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
margin: 0 auto;
position: relative;
}

.images {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
}

HTML:

<div id="circle">
<img class="images" src="https://png.icons8.com/facebook-like-filled/ios7/50" />
</div>
3
jord8on

Ich liebe es, auf alten Bandwaggons zu springen!

Hier ist ein Update 2015 für diese Antwort . Ich habe angefangen, CSS3 transform zu verwenden, um meine Drecksarbeit zur Positionierung zu erledigen. Auf diese Weise müssen Sie kein zusätzliches HTML erstellen, Sie müssen keine Berechnungen durchführen (es müssen keine halben Breiten ermittelt werden), und Sie können es für jedes Element verwenden!

Hier ist ein Beispiel (mit Geige am Ende). Ihr HTML:

<div class="bigDiv">
    <div class="smallDiv">
    </div>
</div>

Mit beiliegendem CSS:

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

Was ich heutzutage oft tue, ist, dass ich den Dingen, die ich zentriert haben möchte, eine Klasse geben und diese Klasse jedes Mal wieder verwenden werde. Zum Beispiel:

<div class="bigDiv">
    <div class="smallDiv centerThis">
    </div>
</div>

cSS

.bigDiv {
    width:200px;
    height:200px;
    background-color:#efefef;
    position:relative;
}
.smallDiv {
    width:50px;
    height:50px;
    background-color:#cc0000;
}
.centerThis {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
}

Auf diese Weise kann ich immer etwas in seinem Container zentrieren. Sie müssen nur sicherstellen, dass sich das Objekt, das Sie zentrieren möchten, in einem Container befindet, in dem position definiert ist.

Hier ist eine Geige

Übrigens: Dies funktioniert auch zum Zentrieren von BIGGER Divs in SMALLER Divs.

3
ntgCleaner

Sie können festlegen, dass die Position des Bilds in der Mitte horizontal ausgerichtet wird

#imageId {
   display: block;
   margin-left: auto;
   margin-right:auto;
}
2
TVT. Jake
div {
  position: absolute;
  
  border: 3px solid green;
  width: 200px;
  height: 200px;
}

img { 
  position: relative;
  
  border: 3px solid red;
  width: 50px;
  height: 50px;
}

.center {    
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
<div class="center">
  <img class="center" src="http://placeholders.org/250/000/fff" />
</div>

Verwandte: Bild zentrieren

1
antelove

Verwenden Sie die Positionierung. Folgendes hat für mich funktioniert:

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

danke an alle anderen für die hinweise.

Ich habe diese Methode benutzt

div.image-thumbnail
{
    width: 85px;
    height: 85px;
    line-height: 85px;
    display: inline-block;
    text-align: center;
}
div.image-thumbnail img
{
    vertical-align: middle;
}
1
Valamas

Stellen Sie einfach den automatischen Bildrand wie unten gezeigt ein.

img{
 margin:auto;
 width:50%;
 height:auto;
}

Überprüfen Sie diese Beispiel

1
Daniel Nyamasyo
.container {
height: 200px;
width: 200px;
float:left;
position:relative;
}
.children-with-img {
position: absolute;
width:50px;
height:50px;
left:50%;
top:50%;
transform:translate(-50%);
}
1
DanielWaw

Hier probieren Sie dies aus.

.parentdiv {
 height: 400px;
 border: 2px solid #cccccc;
  background: #efefef;
 position: relative;
}
.childcontainer {
 position: absolute;
 left: 50%;
 top: 50%;
}
.childdiv {
 width: 150px;
 height:150px;
 background: lightgreen;
 border-radius: 50%;
 border: 2px solid green;
 margin-top: -50%;
 margin-left: -50%;
}
<div class="parentdiv">
  <div class="childcontainer">
     <div class="childdiv">
     </div>
  </div>
</div>
0
Rahil Lakhani

Ich hatte dieses Problem in HTML5 mit CSS3 und mein Bild wurde als solches innerhalb des DIV zentriert ... oh ja, ich kann nicht vergessen, wie ich die Höhe hinzufügen musste, um das Bild anzuzeigen ... für eine Weile habe ich mich gefragt, wo es ist war, bis ich das tat. Ich denke nicht, dass die Position und die Anzeige notwendig sind.

background-image: url('../Images/01.png');    
background-repeat:no-repeat;
background-position:center;
position:relative;
display:block;
height:60px;
0
Clarence

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

IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto 
}

<IMG class="displayed" src="..." alt="...">
0
liza

Die beste Möglichkeit, ein Bild vertikal und horizontal zu zentrieren, besteht darin, zwei Container zu verwenden und die folgenden Eigenschaften anzuwenden:

Der äußere Behälter

  • sollte display: table; haben

Der innere Behälter

  • sollte display: table-cell; haben
  • sollte vertical-align: middle; haben
  • sollte text-align: center; haben

Eine Demo

.outer-container {
    display: table;
    width: 80%; /* can be any width */
    height: 120px; /* can be any height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.inner-container img {
    background: #fff;
    padding : 10px;
    border : 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" />
   </div>
</div>
0
John Slegers

Das hat bei mir funktioniert. Zum Bild hinzufügen css:

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