Haben beunruhigende Ausrichten von Foto in der Mitte in CSS

Question

Ich bin neu in HTML und lerne die Sprache, aber wenn ich versuchte, diese Website zu erstellen, wird das oberste Foto nicht in der Mitte ausgerichtet. Ich habe versucht, vertikale Ausrichtung und Polsterung, aber mit Null Glück. Setzen Sie meinen Code unten. Vielen Dank für die Antworten!

.hudson { 
 
    color: white; 
 
    position: relative; 
 
    font-size: 60px; 
 
    top: 105px; 
 
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif; 
 
    text-align: center; 
 
} 
 
.threeD { 
 
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15); 
 
} 
 
.p1 { 
 
    position: relative; 
 
    text-align: center; 
 
    top: 70px; 
 
    text-align: center; 
 
    -webkit-animation-delay: 1s; 
 
} 
 
.p2 { 
 
    position: relative; 
 
    text-align: center; 
 
    top: 80px; 
 
    text-align: center; 
 
    -webkit-animation-delay: 1s; 
 
} 
 
.p3 { 
 
    position: relative; 
 
    text-align: center; 
 
    top: 90px; 
 
    text-align: center; 
 
    -webkit-animation-delay: 1s; 
 
} 
 
.coding { 
 
    align-items: center; 
 
    padding: 10px; 
 
} 
 
.paracolor { 
 
    color: skyblue; 
 
    font-size: 25px; 
 
    font-family: Orbitron; 
 
    text-align: center; 
 
} 
 
#icons { 
 
    padding-top: 100px; 
 
    text-align: center; 
 
} 
 
#icons i { 
 
    color: white; 
 
} 
 
body { 
 
    background-image: url(PICTURES1/mountains4.jpeg); 
 
    background-repeat: no-repeat; 
 
}

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Orbitron" /> 
 
<link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css"> 
 
<img class="coding animated fadeInDown" src="PICTURES1/coding.png" style="max-width:125px;max-height:125px;"> 
 
<h2 class="hudson threeD animated fadeInDown">Hudson Reamer</h2> 
 
<p class="paracolor p1 animated fadeInRightBig">blah blah blah</p> 
 
<p class="paracolor p2 animated fadeInLeftBig">blah blah blah</p> 
 
<p class="paracolor p3 animated fadeInRightBig">blah blah blah</p> 
 
<div id="icons"> 
 
    <a href="https://www.instagram.com/hreamer/"><i class="fa fa-instagram fa-4x"></i></a> 
 
    <a href="mailto:reamer.hudson@gmail.com"><i class="fa fa-envelope-o fa-4x"></i></a> 
 
    <a href="https://twitter.com/search?q=%40hreamer&src=typd&lang=en"><i class="fa fa-twitter fa-4x"></i></a> 
 
</div>

Answer 1

Sie können ein Standalone-Element Zentrum von auto einen linken und rechten Randwert verwendet wird. Da das Bild ein Inline-Element ist, müssen Sie auch display: block; darauf verwenden, damit dies funktioniert. Und das Element muss eine Breite:

.hudson { 
 
    color: white; 
 
    position: relative; 
 
    font-size: 60px; 
 
    top: 105px; 
 
    font-family: Futura, 'Trebuchet MS', Arial, sans-serif; 
 
    text-align: center; 
 
} 
 
.threeD { 
 
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15); 
 
} 
 
.p1 { 
 
    position: relative; 
 
    text-align: center; 
 
    top: 70px; 
 
    text-align: center; 
 
    -webkit-animation-delay: 1s; 
 
} 
 
.p2 { 
 
    position: relative; 
 
    text-align: center; 
 
    top: 80px; 
 
    text-align: center; 
 
    -webkit-animation-delay: 1s; 
 
} 
 
.p3 { 
 
    position: relative; 
 
    text-align: center; 
 
    top: 90px; 
 
    text-align: center; 
 
    -webkit-animation-delay: 1s; 
 
} 
 
.coding { 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    max-width:125px; 
 
    max-height:125px; 
 
    padding: 10px; 
 
} 
 
.paracolor { 
 
    color: skyblue; 
 
    font-size: 25px; 
 
    font-family: Orbitron; 
 
    text-align: center; 
 
} 
 
#icons { 
 
    padding-top: 100px; 
 
    text-align: center; 
 
} 
 
#icons i { 
 
    color: white; 
 
} 
 
body { 
 
    background-image: url(PICTURES1/mountains4.jpeg); 
 
    background-repeat: no-repeat; 
 
}

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Orbitron" /> 
 
<link rel="stylesheet" type="text/css" href="fontawesome/css/font-awesome.min.css"> 
 
<img class="coding animated fadeInDown" src="PICTURES1/coding.png"> 
 
<h2 class="hudson threeD animated fadeInDown">Hudson Reamer</h2> 
 
<p class="paracolor p1 animated fadeInRightBig">blah blah blah</p> 
 
<p class="paracolor p2 animated fadeInLeftBig">blah blah blah</p> 
 
<p class="paracolor p3 animated fadeInRightBig">blah blah blah</p> 
 
<div id="icons"> 
 
    <a href="https://www.instagram.com/hreamer/"><i class="fa fa-instagram fa-4x"></i></a> 
 
    <a href="mailto:reamer.hudson@gmail.com"><i class="fa fa-envelope-o fa-4x"></i></a> 
 
    <a href="https://twitter.com/search?q=%40hreamer&src=typd&lang=en"><i class="fa fa-twitter fa-4x"></i></a> 
 
</div>

Answer 2

Es scheint, wie Sie nicht genug, um als Junior-Entwickler gesucht haben. Es gibt eine Reihe von Möglichkeiten, wie Sie dies tun können, wenn Sie es googlen möchten.

Fügen Sie einfach

padding: 0 0 0 47%;

in Ihrem Tag img-Stil.

<img class="coding animated fadeInDown" src="PICTURES1/coding.png" style="padding: 0 0 0 47%; max-width:125px;max-height:125px;">