Afbeelding in midden en midden uitlijnen binnen div

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

<div id="over">
	<img src="https://www.garcard.com/images/garcard_symbol.png">
</div>

Antwoord 15

CSS-bestand

.over {
    display : block;
    margin : 0px auto;

Antwoord 16

Het gemarkeerde antwoord hiervoor zal de afbeelding niet verticaal uitlijnen. Een geschikte oplossing voor moderne browsers is flexbox. Een flexcontainer kan worden geconfigureerd om de items zowel horizontaal als verticaal uit te lijnen.

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

Antwoord 17

Stel gewoon de parent div css-eigenschap “text-align:center;” in

<div style="text-align:center; width:100%">
        <img src="img.png"> 
 </div>

Antwoord 18

Probeer deze minimale code:

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

En CSS:

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

Antwoord 19

veel antwoorden stellen voor om margin:0 autote gebruiken, maar dit werkt alleen als het element dat u gecentreerd probeert te maken niet links of rechts zweeft, dat wil zeggen floatcss kenmerk is niet ingesteld. Om dit te doen, past u het kenmerk displaytoe op table-cellen past u vervolgens de linker- en rechtermarge toe op automatisch, zodat uw stijl eruitziet als style="display:table-cell;margin:0 auto;"

Antwoord 20

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

Antwoord 21

HTML:

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

CSS:

#over {
  text-align: center;
}
#over img {
  vertical-align: middle;
}

Antwoord 22

Voor horizontaal midden Plaats gewoon

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

Een andere methode:

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

Voor verticaal centreren Zet gewoon:

  #over img {
           vertical-align: middle;
        }

Antwoord 23

Dit werkte voor mij:

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

Antwoord 24

dit deed de truc voor mij.

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

‘Opmerking: heb in dit geval geen css-klasse gekoppeld aan ‘BrandImage’

CSS:

.CenterImage {
    position:absolute; 
    width:100%; 
    height:100%
}
.CenterImage img {
    margin: 0 auto;
    display: block;
}

Antwoord 25

Dit werkte voor mij wanneer je de afbeelding in het midden moet uitlijnen en je bovenliggende div naar afbeelding het hele scherm beslaat. d.w.z. hoogte:100% en breedte:100%

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

Antwoord 26

Gebruik positionering. Het volgende werkte voor mij…

Met zoom naar het midden van de afbeelding (afbeelding vult de 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;
}

Zonder zoom naar het midden van de afbeelding (afbeelding vult nietde div):

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

27

Ik voeg wat meer eigenschappen toe aan de CSS. Zoals SO:

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

28

Ik heb de oplossing ook geprobeerd om de IMG in het midden van de div te plaatsen, maar voor mijn zaak heb ik gewoon dit type component nodig op de voortgang van Ajax, dus ik probeerde eenvoudig de volgende oplossing, hoop dat dit helpt voor jou!

<div id="loader" style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;z-index: 1;background: rgba(255,255,255,0.5) url('your_image_url') no-repeat center;background-size: 135px;display: none;"></div>

29

U kunt deze oplossing bekijken:

horizontaal en verticaal een afbeelding in een doos

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