Haben Sie ein Problem, das Bild zentriert?

Question

Ich versuche, mein Bild "Logo_Home.svg" auf meiner Seite zu zentrieren, aber aus irgendeinem Grund funktioniert es nicht und sitzt in der oberen linken Ecke. Weiß jemand wo ich hier falsch liege und kann mich in die richtige Richtung lenken?

Danke.

EDIT 1

Habe ich nur noch die Klasse in der Image-Tag, wie ich es vergessen haben, aber es ist immer noch nicht vertikal nur horizontal zentriert. Weiß jemand, wie man das repariert?

EDIT 2

Beispiel von dem, was es ist, ich zu erreichen bin versucht.

body { 
 
    margin: 0; 
 
    background-image: url(http://pa2.site.com/IMAGES/Background.svg); 
 
    background-repeat: repeat; 
 
} 
 

 
li { 
 
    float: right; 
 
    list-style-type: none; 
 
    border: 2px solid #2f8fcb; 
 
    border-radius: 10px; 
 
    background-color: #2f8fcb; 
 
    color: #fff; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    width: 200px; 
 
    text-align: center; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
    margin-right: 40px; 
 
    margin-top: 40px; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
} 
 

 
img.center { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<ul> 
 
    <li>REGISTER</li> 
 
    <li>LOGIN</li> 
 
</ul> 
 

 
<img src="http://pa2.site.com/IMAGES/Logo_Home.svg" class="center">

Answer 1

body { 
 
    margin: 0; 
 
    background-image: url(http://pa2.sulmaxcp.com/IMAGES/Background.svg); 
 
    background-repeat: repeat; 
 
} 
 

 
li { 
 
    float: right; 
 
    list-style-type: none; 
 
    border: 2px solid #2f8fcb; 
 
    border-radius: 10px; 
 
    background-color: #2f8fcb; 
 
    color: #fff; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    width: 200px; 
 
    text-align: center; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
    margin-right: 40px; 
 
    margin-top: 40px; 
 
} 
 

 
ul { 
 
    margin: 0; 
 
} 
 

 
.contain { 
 
    padding-top:20%; 
 
} 
 
img.center{ 
 
    display:block; 
 
    margin: 0 auto; 
 
} 
 

<ul> 
 
    <li>REGISTER</li> 
 
    <li>LOGIN</li> 
 
</ul> 
 

 
<div class="contain"> 
 
<img src="http://pa2.sulmaxcp.com/IMAGES/Logo_Home.svg" class="center"> 
 
</div>

habe ich Ihre img innerhalb eines div vertikal zentriert mit margin-top

Answer 2

Dies scheint zu bekommen, was du bist Suchen nach:

ul { 
    float: right; 
    margin: 0; 
} 

img.center { 
    clear: both; 
    display: block; 
    margin: 0 auto; 
} 

Demo

Answer 3

Ich habe versucht, mit Flex-Box, diese zu lösen und es scheint, den Trick getan zu haben. Ich begann mit dem Einbinden des Bildes in ein Div mit der Klasse der Mitte. Ich bewarb mich dann diese CSS die zentrierte Inhalte zu erreichen:

div.center{ 
    display: flex; 
    align-items:center; 
    justify-content:center; 
    height:70vh; 
    width:90vw; 
} 

Werfen Sie einen Blick auf dieses jsfiddle.