it-swarm.com.de

Richten Sie das Bild in der Mitte und Mitte in div aus

Ich habe folgendes div

<div id="over" style="position:absolute; width:100%; height:100%>
 <img src="img.png">
</div>

Wie kann man das Bild so ausrichten, dass es sich in der Mitte und im Zentrum von div befindet?

250
Dro1n2

JSFiddle

body {
	margin: 0;
}

#over img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
<div id="over" style="position:absolute; width:100%; height:100%">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

364
Gurpreet Singh
<div style="display:table-cell; vertical-align:middle; text-align:center">
<img src="img.png">
</div>
145
John K.

Mir scheint, Sie wollten auch, dass das Bild innerhalb des Containers vertikal zentriert ist. (Ich habe keine Antwort gesehen, die das voraussetzt)

Working Fiddle:

  1. Reine CSS-Lösung
  2. Den Dokumentenfluss nicht unterbrechen (keine Floats oder absolute Positionierung)
  3. Browserübergreifende Kompatibilität (auch IE6)
  4. Vollständig ansprechend.

HTML

<div id="over">
    <span class="Centerer"></span>
    <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" />
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
#over
{
    position:absolute;
    width:100%;
    height:100%;
    text-align: center; /*handles the horizontal centering*/
}
/*handles the vertical centering*/
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
.Centered
{
    display: inline-block;
    vertical-align: middle;
}

Anmerkung: Diese Lösung eignet sich gut zum Ausrichten von Elementen in einem beliebigen Element. Für IE7 müssen Sie beim Anwenden der .Centered-Klasse auf Blockelemente einen anderen Trick anwenden, damit inline-block funktioniert. (weil IE6/IE7 nicht gut mit Inline-Block auf Blockelementen spielt)

86
avrahamcool

Dies kann auch über das Flexbox-Layout erfolgen:

STATISCHE GRÖSSE

.parent {
    display: flex;
    height: 300px; /* Or whatever */
    background-color: #000;
}

.child {
    width: 100px;  /* Or whatever */
    height: 100px; /* Or whatever */
    margin: auto;  /* Magic! */
}
<div class="parent">
    <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

DYNAMISCHE GRÖSSE

html, body {
  width: 100%;
  height: 100%;
  display: flex;
  background-color: #999;
}

* {
  margin: 0;
  padding: 0;
}

.parent {
  margin: auto;
  background-color: #000;
  display: flex;
  height: 80%;
  width: 80%;
}

.child {
  margin: auto;  /* Magic! */
  max-width: 100%;
  max-height: 100%;
}
<div class="parent">
  <img class="child" src="https://i.vimeocdn.com/portrait/58832_300x300"/>
</div>

Ich habe das Beispiel in diesem article gefunden, das sehr gut erklärt, wie man das Layout verwendet.

85
aerdman
img.centered {
   display: block;
   margin: auto auto;
}
57
Nitin
#over {position:relative; text-align:center; 
       width:100%; height:100%; background:#CCC;}

#over img{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
26
dhir

Sie können dies leicht mit der Eigenschaft display: flex css tun 

#over {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
22

Wenn Sie den rechten und linken Rand auf automatisch einstellen, wird das Bild zentriert.

<div id="over" style="position:absolute; width:100%; height:100%>
<img src="img.png" style="display: block; margin: 0 auto;">
</div>
10
Garconis

Ich hatte immer noch Probleme mit einer anderen hier vorgestellten Lösung. Zum Schluss funktionierte das am besten für mich:

<div class="parent">
    <img class="child" src="image.png"/>
</div>

css3:

.child {
 display: block;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
 -moz-transform: translate(-50%, -50%); /* Firefox */
 -ms-transform: translate(-50%, -50%); /* IE 9 */
 -o-transform: translate(-50%, -50%); /* Opera */
 // I suppose you may like those too:
 // max-width: 80%;
 // max-height: 80%;
}

Sie können mehr über diesen Ansatz lesen auf dieser Seite .

9
pawel7318

Dies wäre ein einfacherer Ansatz

#over > img{
    display: block;
    margin:0 auto; 
}
8
Sujay sreedhar

stellen Sie img auf display: Inline-Block ein, während Sie das übergeordnete div auf text-align: center gesetzt haben

BEARBEITEN: für diejenigen, die mit display: Inline-Block >>> spielen, vergessen Sie nicht, dass z. zwei divs mögen

<div>Div1 content</div>NOSPACEHERE<div>Div2 content</div>

haben wirklich keine Leerzeichen zwischen sich (wie hier zu sehen).

Einfach, um diese (inline blockierten) Lücken zwischen ihnen zu vermeiden. Diese Lücken sind zwischen zwei Wörtern zu sehen, die ich gerade schreibe! :-) Also .. hoffe das hilft einigen von euch.

6
sasha

EINFACH. 2018. FlexBox. So überprüfen Sie die Browser-Unterstützung - Kann ich verwenden

Minimallösung:

div#over { 
   display: flex; 
   justify-content: center; 
   align-items: center; 
}


Um eine möglichst breite Browserunterstützung zu erhalten: 

div#over { 
   display: -webkit-flex;
   display: -ms-flex; 
   display: flex; 
   justify-content: center; 
   -ms-align-items: center; 
   align-items: center; 
}
6
Nadav

CSS-Datei

.over {
    display : block;
    margin : 0px auto;
5
Sabarish R

Ich habe viele Ansätze ausprobiert, aber nur diese funktioniert für mehrere Inline-Elemente in einem Container-Div. Hier ist der Code, um alles in div in der Mitte auszurichten.

CSS

.divContainer
{
    vertical-align: middle;
    text-align: center; <!-- If you want horizontal center alignment -->
}
.divContainer > *
{
    vertical-align: middle;
}

HTML

<div class="divContainer">
    <span>Middle Text</span>
    <img src="test.png"/>
</div>

Beispielcode ist hier: https://jsfiddle.net/yogendrasinh/2vq0c68m/

5
Yogee

Versuchen Sie diesen minimalen Code:

<div class="outer">
    <img src="image.png"/>
</div>

Und CSS:

.outer{
  text-align: center;
}
.outer img{
  display: inline-block;
}
3
luchopintado

HTML:

<div id="over">
    <img src="img.png">
</div>

CSS:

#over {
  text-align: center;
}

#over img {
  vertical-align: middle;
}
2
Lahori

das hat den Trick für mich gemacht. 

<div class="CenterImage">
         <asp:Image ID="BrandImage" runat="server" />
</div>

'Hinweis: In diesem Fall muss keine' CSS-Klasse 'mit' Brand Image 'verknüpft sein

CSS:

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}

.CenterImage img {
    margin: 0 auto;
    display: block;
}
2
julian9876

Für Mitte horizontal Einfach setzen

#over img {
    display: block;
    margin: 0 auto;
    clear:both;
}

Eine andere Methode:

#over img {
    display: inline-block;
    text-align: center;
}

Für die Mitte vertikal

   #over img {

           vertical-align: middle;
        }
2
Sanjib Debnath

viele Antworten schlagen die Verwendung von margin:0 auto vor. Dies funktioniert jedoch nur, wenn das Element, das Sie zentrieren möchten, nicht nach links oder rechts verschoben wird, dh das Attribut float css ist nicht festgelegt. Um dies zu tun, wende das display-Attribut auf table-cell an und wende den linken und rechten Rand auf auto an, damit dein Stil style="display:table-cell;margin:0 auto;" aussieht.

2
vikas devde
    <div>
    <p style="text-align:center; margin-top:0px; margin-bottom:0px; padding:0px;">
    <img src="image.jpg" alt="image"/>
    </p>    
    </div>
2
betty.88

Das hat für mich funktioniert:

#image-id {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: auto;
    margin: 0 auto;
}
2
Sileria

Nun, wir sind im Jahr 2016 ... warum verwenden wir nicht Flexbox? Es ist auch ansprechend. Genießen.

#over{
display:flex;
align-items:center;
justify-content:center;
}
<div id="over">
	<img src="http://www.garcard.com/images/garcard_symbol.png">
</div>

2
GabMic

Dies hat bei mir funktioniert, wenn Sie das Bild zentrieren müssen und Ihr übergeordnetes Div-zu-Bild den gesamten Bildschirm abdeckt. d.h. Höhe: 100% und Breite: 100%

#img{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
1
Akshay Bande

Positionierung verwenden. Folgendes hat für mich gearbeitet ...

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

Die markierte Antwort darauf richtet das Bild nicht vertikal aus. Eine geeignete Lösung für moderne Browser ist die Flexbox. Ein flexibler Container kann so konfiguriert werden, dass seine Elemente sowohl horizontal als auch vertikal ausgerichtet werden.

<div id="over" style="position:absolute; width:100%; height:100%; display: flex; align-items: center; justify-content: center;">
    <img src="img.png">
</div>
1
WDuffy

Das sollte funktionieren.

WICHTIG FÜR DEN TEST: Zum Ausführen des Code-Snippets klicken Sie auf die linke Taste RUN-Code-Snippet , dann den rechten Link Ganze Seite

#fader{
position:fixed;z-index: 10;
top:0;right:0;bottom:0;left:0;
opacity: 0.8;background: black;
width:100%;height:100%;
text-align: center;
}
.faders{display:inline-block;height:100%;vertical-align:middle;}
.faderi{display:inline-block;vertical-align:middle;}
<div id="fader">
<span class="faders"></span>
<img class="faderi" src="https://i.stack.imgur.com/qHF2K.png" />
</div>

0
Intacto

Verwenden Sie die Bootstraps align-items und justify-content. Siehe Beispiel unten:

<div class="well" style="align-items:center;justify-content:center;">
    <img src="img_source" height="50px" width="50px"/>
</div>
0
Mwizak

Die Antwort von Daaawx funktioniert, aber ich denke, es wäre sauberer, wenn wir das Inline-CSS entfernen würden.

body {
        margin: 0;
}

#over img {
        margin-left: auto;
        margin-right: auto;
        display: block;
}
div.example {
  position: absolute;
  width: 100%;
  height: 100%;
}
<div class="example" id="over">
        <img src="http://www.garcard.com/images/garcard_symbol.png">
</div>
0
LizardKG

Ein einfacher Weg wäre, separate Stile für das div und das Bild zu erstellen und sie dann unabhängig voneinander zu positionieren. Wenn ich meine Bildposition auf 50% setzen möchte, hätte ich Code, der wie folgt aussieht ....

#over{
  position:absolute;
  width:100%;
  height:100%;
}
#img{
  position:absolute;
  left:50%;
  right:50%;
}
<div id="over">
 <img src="img.png" id="img">
</div>

0
KSJ10

Ich füge dem CSS einige weitere Eigenschaften hinzu. So wie:

div#over {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    -ms-align-items: center;
    display: -webkit-flex;
    display: -ms-flex; 
    display: flex;
}
0
Kramer

Sie können einen Blick auf diese Lösung werfen: 

Ein Bild in einer Box horizontal und vertikal zentrieren

<style type="text/css">
.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: ...;
    height: ...;
}
.wraptocenter * {
    vertical-align: middle;
}
.wraptocenter {
    display: block;
}
.wraptocenter span {
    display: inline-block;
    height: 100%;
    width: 1px;
}
</style>
<!--[if lt IE 8]-->
<style>
.wraptocenter span {
    display: inline-block;
    height: 100%;
}
</style>
<!--[endif]-->

<div class="wraptocenter"><span></span><img src="..." alt="..."></div>
0
fpauer
#over {
    display: table-cell; 
    vertical-align: middle; 
    text-align: center;
    height: 100px;
}

Ändern Sie den Höhenwert für Ihren Bedarf.

0
Terry Lin