HTML & CSS | Images ist nicht zentriert?

[paulick10]

Hey Leute, es geht um diese Website die ich für einen Freund entwerfen soll.. https://nerdflix.me

Ich habe in der mitte den Text "About Nerdflix" mit -text-allign: center- zentriert.

Jetzt wollte ich dass, das Bild genau da drüber ist... Aber es ist zu weit rechts..

Hier ist der Code

.profilimage {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid cyan;
  transition: all .5s;
  position: relative;
  left: 50%;
  right: 50%;
  top: 10;
}

Was habe ich falsch gemacht?

Danke und ein schönen Sonntag noch!

 

[michi174]

einfach noch die Hälfte der Breite mit margin-left abziehen, dann ist es zentriert.

Also:

margin-left: -75px;

 

[paulick10]

Okay, hat geklappt!

Danke !

 

[Lavaground]

Da gibts noch statt margin-left, left & right:

display: block; (ist keine container ums bild, daher kein inline-block)
margin: 0 auto;

oder wenns schon mit left laufen soll, dann reicht:

left: calc(50% - 75px);

-o-left: calc(50% - 75px);
-moz-left: calc(50% - 75px);
-webkit-left: calc(50% - 75px);

Mozilla, Chrome und Edge/IE11 sollten es eigentlich ohne Zusatz können. Man weiß aber nie wer welche Version verwendet.

 

[funkmasterflow]

Vielleicht noch ein allgemeiner Hinweis für Dich:
Achte darauf, das Dein HTML (und auch CSS/JS) sauber ist.
Da ist momentan viel durcheinander. Zum Beispiel ist dein HTML-head total leer und die Infos die da hinein gehören (Meta-Tags, CSS, usw.) kommen erst später im Body. Jag' deine Seite während der Entwicklung mal ab und an durch den W3C Validator.

Dann ist dein CSS momentan viel zu umfangreich. Kurze Analyse in Chrome hat ergeben, das ca. 80% ungenutzt sind.
Ok, stimmt nicht ganz, weil das ja nur eine statische Analyse ist. Bissl was davon muss drin bleiben für bestimmte Vieports.
Aber trotzdem kannst Du da noch einiges wegschmeißen, was sich positiv auf die Ladezeit auswirkt.

Und wieso dieses Intro, wenn man die Seite erstmalig lädt?
Ich will doch wissen, was mich erwartet und nicht sekundenlang auf ein Logo starren, was mir nichts sagt.
Im Zweifel schließt der Besucher die Seite wieder, weil er nicht schnell genug die Information bekommt.

Mixed Content:
Du lieferst die Seite über HTTPS aus. Das ist gut.
Dann musst Du aber auch alle Bilder, Cursor, etc. per HTTPS einbinden.
Ansonsten werden diese vom Browser blockiert.

Ich hoffe, ich konnte Dich dazu anregen, deine Seite etwas zu verbessern

 

[paulick10]

Okay vielen dank für eure antworten!

 

[r15ch13]

• Zeile 2 schliessenden HTML-Tag entfernen: </html>
• https://nerdflix.me/assets/particel.js endet in 404 Not Found
• Kopier den Mousecursor auf deinen Webspace, da cursors-4u.net kein HTTPS unterstuetzt (http://cur.cursors-4u.net/cursors/cur-2/cur116.cur) und passe das CSS an. Damit waere das Mixed Content Problem bereits behoben.
• Das Intro hat mich tatsaechlich gestoert, hab schon wild umhergeklickt bis was passiert ist

 

[Webentwickler]

Ansonsten ist zum (vertikalen) Zentrieren Flexbox auch total super.