Bei Vorlagen-Designer Header zentrieren ♥


Oft werden wir gefragt, wie man den Header mittig ausrichtet. Wir haben gerade nur die Antwort für den Vorlagendesigner, für die alten müssen wir noch etwas tüfteln und schauen, wie wir es nicht allzu kompliziert erklären :)




Schritt 1

Ihr öffnet "Design" --> "Vorlagen-Designer" und geht auf "Erweitert". Dort scrollt ihr ganz runter zu "CSS einfügen".



Schritt 2

Ihr fügt in den weißen Kasten dann das hier ein:

#Header1_headerimg {
  margin: auto;
}

Dann müsste das so aussehen:


Und schon habt ihr euren Header mittig. Manchmal reagiert Blogger nicht gleich, also versucht es nochmal, wenn es nicht gleich klappt :)




Wenn es nicht klappt, versucht, das hier einzusetzen:


#header-inner img {
margin: 0 auto;}

Blogger ist manchmal schon gemein :(

120 120 Kommentare

  1. heii
    ich musste 8 Leuten einen Blogaward verliehen und du/ihr seit einer davon :)
    http://thekimbarbie.blogspot.com/2011/01/stylish-blogger-award.html
    xx

    AntwortenLöschen
  2. Bei mir funktioniert das nicht. Ich habe es schon vor ein Paar Stunden mehrmals versucht. Aber nichts.

    AntwortenLöschen
  3. Toll, danke! Bei mir hat's auf Anhieb geklappt! Gibt's auch einen Trick, wie ich meinen Header in der Grösse anpassen kann?

    www.ryf-style.blogspot.com

    AntwortenLöschen
  4. OH MEIN GOTT ;) ENDLICH!!
    dankeeee
    hat sofort geklappt :D

    u das mit dem kommentardingslink auch :D
    DANKE iHR SEIT DI BESTE SEITE ALLER ZEITEN :D


    take a look at my blog (: and maybe follow me on bloglovin or Facebook

    XOXO S.

    AntwortenLöschen
  5. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  6. bei mir funktioniert es leider auch nicht, wahrscheinlich liegt es an der vorlage.

    AntwortenLöschen
  7. bei mir funktioniert es leieder auch nicht... :( hmm, mein header ist eh doof platziert. kannst du vllt mal auf meine seite klicken und schauen woran es liegen könnte? mein header ist mir auch viel zu eckig und gross. am liebsten hätte ich ihn etwas kleiner, daür länger(das erüber die ganze seite geht, als bis ende des seitentextes) oder eben mittig.. über eine antwort würd ich mich sehr freuen :) dieser blog ist goldwert:)
    lg kim

    AntwortenLöschen
  8. Bei mir hats super geklappt, mich würde nur noch interessieren wie man den Blog Titel ebenso mittig platziert, damit das untereinander ist. Habs hier leider nicht finden können, aber vielleicht bin ich auch nur ein bisschen zu blind <.<

    AntwortenLöschen
  9. Der letzte Code hat nur geklappt!
    Danke! Habe mich schon etwas länger gefragt wie das geht :/

    AntwortenLöschen
  10. vielen vielen dank für diesen post!!
    ich hab mich schon so oft aufgeregt weil ich den header nicht mittig bekommen hab -.-'
    danke danke danke

    <3

    AntwortenLöschen
  11. Bei mir ging auch nur der zweite Code :) Aber danke für das Tut! :) Hab ewig im Quelltext rumgesucht und nix gefunden! :)

    AntwortenLöschen
  12. ich find eure Seite echt toll :)
    das mit dem Header zentrieren hat beim alten Header sofort geklappt, aber jetzt geht es nicht, ich weiß nicht warum... :/

    AntwortenLöschen
  13. Danke für den Tip!
    Zuerst habe ich es mit Code 1 probiert...nichts....
    Löschte (merkte das kurz der Header mittig war)...und setzte den Code 2 rein....auch nichts,
    löschte, sie oben.
    Also an was lag es....
    #Header1_headerimg {
    margin: auto;
    }<das letzte Zeichen ließ ich weg,
    und der Header ist mittig.
    Warum auch immer.....=0)

    LG von Luna

    AntwortenLöschen
  14. bei mir funktioniert es leider auch nicht. kann es vielleicht daran liegen, dass ich kein bild als header habe, sonderen nur schrift ? :o

    AntwortenLöschen
  15. haha cool, musste das letzte zeichen vom 2. code weglassen, dann fkt ;D

    AntwortenLöschen
  16. Super. Dank euch entwickelt sich mein Blog langsam so wie ich ihn mag.

    Schat mal bitte vorbei: http://sandra-bart.blogspot.com/

    Allerdings htte ich noch zwei Fragen: Wei bekomme ich den Header mit den Stifteteil breiter und wie kann ich mir die stifte (eigenes bild von mir) links und rechts hinbasteln, also als template?

    AntwortenLöschen
  17. Vielen Dank für das Tutorial, mir hats geholfen :)
    Jetzt zu meiner Frage- kann man das auch einrichten, dass auch das Menü unter dem Header mittig ist?

    Lieben Gruß ;)

    AntwortenLöschen
  18. oder so, das hat bei mir geklappt (die zwei oberen gingen iwie nicht..)

    .Header {
    text-align: center;
    }

    AntwortenLöschen
    Antworten
    1. danke! der code funzt endlich mal!

      Löschen
    2. Ja stimmt mit dem Code hat es funktionier.DANKE!!!!

      Löschen
    3. oh man, Danke! Die anderen gingen bei mir nicht, aber mit dem klappt es :)
      mais-lifestyleblog.blogspot.de

      Löschen
    4. der code hat bei mir auch funktioniert, allerdings letzte klammer weggelassen. dann ging es. Jetzt fehlt mir noch die Menüleiste, die möchte ich auch zentrieren. Wisst ihr wie das geht?

      BellaMein herzensüßer Blog

      Löschen
    5. Danke!! Funktioniert super!!
      (Auch danke für das tolle Tutorial von Copy Paste Love :D )

      Löschen
    6. Dankeeeeeeeeeee, du bist ein Schatz! Jetzt funktioniert es auch bei mir!

      Löschen
    7. Dankeschön! Es hat sofort funktioniert

      Löschen
    8. Danke dir, der hat funktioniert :)

      Löschen
  19. bei mir funktionierts auch nicht...ich hab allerdings die Minima Vorlage von den 2006'ern...Wie funktioniert das dafür? =(

    AntwortenLöschen
  20. bei mir funktionierts auch ned... aber als ich eine neue vorlage hatte, hats auf anhieb geklappt, vll klappts nur bei den alten nicht :/

    AntwortenLöschen
  21. Danke...Könnt ihr mir sagen wie mal die tabs zentriert?

    AntwortenLöschen
  22. hej c: bei mir hat es sofort geklappt.
    jetzt habe ich aber noch eine anderern frage.Bei mir ist vo dem haeder oder beim Haeder so eine Blaue Fläche...Was sit das und wie bekomme ich das weg ??
    Siehe:

    http://frombudtobloom.blogspot.com/

    danke schonmal c:

    AntwortenLöschen
  23. Danke, bei mir hat´s nach mehreren Versuchen gut funktioniert!

    AntwortenLöschen
  24. mit dem zweiten hat es bei mir auch geklappt! danke für diesen wundervollen tipp!!

    AntwortenLöschen
  25. Danke! es hat auch gleich funktioniert... und ich dachte ich müsste mit dem linksseitigen Header leben...

    Grüße

    AntwortenLöschen
  26. Ihr seid einfach die Besten. Bei mir hat auch der zweite Code ohne das letzte Zeichen geklappt.
    Ich danke euch so so so so sehr für all eure Mühe <3 <3 <3

    AntwortenLöschen
  27. Ich hab auch einfach das letzte Zeichen weggelassen und dann klappte es auch be mir! Diese Seite ist echt ein Segen! DANKE! :)

    AntwortenLöschen
  28. es funktioniert nicht! woran könnte das liegen?

    AntwortenLöschen
  29. funktioniert nicht :( aber is auch nicht soo wichtig

    AntwortenLöschen
  30. Danke,ich liebe dich dafür :D

    Hat eeeeendlich geklappt http://phototowngirl.blogspot.com/ <3<3

    AntwortenLöschen
  31. Viiiiiiiilen Dank! Code 2 mit weggelassenen letzten Zeichen hat funktioniert :-) Bin überglücklich!

    http://missblueberrymuffin.blogspot.com/

    AntwortenLöschen
  32. Bei mir geht's leider nicht :/

    AntwortenLöschen
  33. Bei mir geth's auch nicht. Wieso?

    AntwortenLöschen
  34. Neeein es geht nich *sniff*
    Auch nich mit zweiten Code & da letztes Zeichen weggelassen -.-

    AntwortenLöschen
  35. Es funktioniert einfach nicht, ich beschäftige mich jetzt schon seit einer Stunde damit. Was kann ich noch tun damit der dumme Header in der Mitte ist?

    AntwortenLöschen
  36. Warum funktiuniert das nicht blöder header:(

    AntwortenLöschen
  37. An alle bei dennen es nicht funktiuniert, ihr müsst eine andere Vorlage nehmen!

    AntwortenLöschen
  38. DANKE!! :)

    www.harmonyiseverything.blogspot.de

    AntwortenLöschen
  39. Eure Seite ist sooo super, ich hole mir hier immer Anregungen und ihr habt mir schon so einiges Mal geholfen! Da shier hat auch auf Anhieb geklappt. Vielen, vielen Dank!
    Ich wollte mal fragen, ob es für euch in Ordnung wäre, wenn ich in einem Post über euren tollen Blog schreibe!?

    Liebe Grüße
    Anna

    AntwortenLöschen
  40. Bei mir funktioniert nur der zweite Code:

    #header-inner img {
    margin: 0 auto;}

    Vielen Dank! <3

    http://lilienwolf.blogspot.com

    AntwortenLöschen
  41. Gibt es auch eine Möglichkeit, die Zentrierung wieder zu entfernen? Meiner ist zentriert, im CSS habe ich aber gar nichts mehr gespeichert... Mein Header passt zentriert jetzt gar nicht mehr :(

    www.nyiloveyou-nyiloveyou.blogspot.com

    AntwortenLöschen
  42. Bei mir hat es mit dem ersten Code auf Anhieb geklappt. Danke für die Erklärung!

    AntwortenLöschen
  43. hej (:

    hat geklappt :b
    aber ich würde es gerne rückgängig machen.
    & wenn ich jetzt wieder zum CSS bereich gehe ,
    steht da nichts mehr . Könnt ihr mir bitte helfen ?

    AntwortenLöschen
  44. Hej (;
    Kann man den header auch rechtsbündig machen ? <3

    AntwortenLöschen
  45. Bei mir zeigt es den Header im Vorlagendesigner mittig an und auf dem Blog ist er aber linksbündig? Wie kann das denn sein?:(

    AntwortenLöschen
  46. Bei mir hat es geklappt, indem ich nach '.header-inner' gesucht und dort 'position: relative; text-align: center;' eingesetzt habe.

    LG,
    Nicole

    AntwortenLöschen
  47. Mein Header ist genauso breit wie mein Blog und ich habe jetzt schon versucht alle Codes einzusetzen und auch das letzte Zeichen wegzulassen und es funktioniert trotzdem nicht... Ich habe keine Ahnung was ich falsch mache!
    Bitte schaut mal vorbei!

    LG Sophia

    AntwortenLöschen
  48. Hey, das mit dem Header hat super geklappt ;)

    Aber kann ich das auch für die Bilder und Texte an den Seiten machen?

    AntwortenLöschen
  49. Knnast du mir vielleicht erklären wie ich mein Dashbord auf die alten Vorlagen umstelle, ich hätte gerne das Minima - Layout bzw. die Vorlage aber alle die das in Foren erklären haben die ältere Version, wie kriege ich die auch??

    AntwortenLöschen
  50. Bei mir geht es nicht. Nicht mal der 2. Versuch mit dem anderen >.< brauche deine Hilfe T^T

    AntwortenLöschen
  51. Hey, mein Header ist zu groß. Finde ich da im HTML-Text eine Stelle, wo ich die Größe verändern kann?

    AntwortenLöschen
  52. Danke! Diese Seite ist wirklich so toll, weiter so!

    AntwortenLöschen
  53. Hat sofort geklappt, vielen Dank! lg Lena

    AntwortenLöschen
  54. ich hab zwar den header zentriert, aber wie bekomme ich ihn jetzt wieder nach links??? bitte helft mir :(

    AntwortenLöschen
  55. Wow, hat sofort geklappt.
    Danke für das Tutorial :D

    AntwortenLöschen
  56. DAAAAANNNKKKEEEEE!!! :D

    AntwortenLöschen
  57. Hey! Und wie bestätigt man das ganze?
    Auf "Auf Blog anwenden" klicken? Bei mir funktioniert das leider nicht :(
    Schonmal danke für die Hilfe!

    AntwortenLöschen
  58. Super ,danke schön! :) Ich wollte schon immer wissen, wie das geht!

    LG !

    AntwortenLöschen
  59. Hat sofort geklappt. Vielen Dank. :)

    AntwortenLöschen
  60. oh DANKE daran hab ich schon so lange getüftelt!
    danke danke danke !!!

    AntwortenLöschen
  61. das bild bekomme ich zentriert, aber wie zentriere ich den blogtitel mit dem vorlagendesigner? mit dem html editor krieg ichs nicht hin.

    liebe grüße und danke schonmal!

    email: shewantstobe@live.de

    AntwortenLöschen
  62. Könnt ihr mir auch sagen, wie ich das wieder rückgängig machen kann? :-)
    LG, Sophia :-)

    www.lifeiswoonderfull.blogspot.de

    AntwortenLöschen
  63. Danke, habe ich gleich angewendet:
    http://tildaaddict.blogspot.de/

    AntwortenLöschen
  64. Mein Header ist ein Text und es hat mit diesem Code geklappt:

    .Header {
    text-align: center;
    }

    Danke für die tolle Seite!

    Vica von 1690mm.blogspot.de

    AntwortenLöschen
  65. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  66. Ich weiß nicht wie das passieren konnte, aber mein vorher schon mittiger Header hat sich irgendwie wieder von selber nach links gerückt ... :-c Jetzt geht es auch nicht mehr, wenn ich den Link neu einfüge.

    Hmm....

    AntwortenLöschen
  67. Bei mir funktioniert das leider nicht :(

    AntwortenLöschen
    Antworten
    1. Ich habe das letze zeichen vom 2.Header CSS weg gelassen und schupp di wupp hats geklappt. :) Supii (:
      Jetzt habe ich aber noch eine frage wie kriege ich mein Header lang, weil meiner ist Viereckig und ich würde es sehr gerne längslich haben ? :)
      http://prioritaetenp.blogspot.de/

      Löschen
  68. Dankedankedanke!
    Es hat funktioniert, als ich die letzte Klammer von Deinem ersten Tipp weggelassen habe (war irgendwie aus Versehen...Hab ja keinen Plan von CSS und sowas).

    AntwortenLöschen
  69. Funktioniert das auch, wenn man nur Schrift hat oder muss man ein richtiges Bild als Header haben?

    AntwortenLöschen
  70. Super! ewig geschaut wo mans einstellen kann! vielen Dank.

    AntwortenLöschen
  71. Hallo!

    1) Wie bekomme ich den Header bündig? Bei mir ist ein weißer Rand links und rechts, sowohl oben zu sehen(hier mein Blog: kailistyle.blogspot.com). Ich möchte, dass mein Header genau so aussieht wie auf copypastelove.de

    2) Außerdem finde ich im Netz keine Einleitung darüber, wie ich meine Menüpunkte rechts in den Header einbauen kann (wie auch auf copypastelove.de)

    Vielen Dank!
    Kaili

    AntwortenLöschen
  72. Danke, ihr seit wirklich toll!! :) Bei mir hat der Code ein bisschen anderes geklappt.
    #header-inner img {
    margin: 0 auto;
    Vielen Danke

    AntwortenLöschen
  73. http://chest-nut.blogspot.de/
    hat jemand einen tipp für mich wie ich meinen header verbessern kann ? also in dem sinne, dass er entweder auch mittiger geht ( bei mir hat das hier leider irgendwie nicht geklappt) oder wie man ihn über die ganze fläche zieht sozusagen.. bin dankbar für jeden tipp :)

    AntwortenLöschen
  74. Ihr seid wundervoll! Ich habe schon so vieles bei euch gelernt und viele eurer Tipps und Anleitung umgesetzt! Hier ist alles super leicht erklärt und selbst HTML-Anfänger einfach anzuwenden. Weiter so!

    LG
    Ela

    AntwortenLöschen
  75. Bei mir klappt es nicht.........weiß nicht warum,Schade aber.

    AntwortenLöschen
  76. Bei mir klappt es nicht.........weiß nicht warum,Schade aber.

    AntwortenLöschen
  77. Vielen Dank! Endlich ist mein Header mittig ausgerichtet :)

    Liebe Grüße
    Isabel

    AntwortenLöschen
  78. Vielen Dank für den Code. Somit hatte ich keine Probleme das Headerbild zu zentrieren.

    AntwortenLöschen
  79. Nach wie vor aktuell und funktioniert. Vielen Dank!

    AntwortenLöschen
  80. Vielen Vielen Dank, seit einem Jahr versuche ich das schon und habe auch einige Videos dazu geschaut. Nun hat es endlich geklapt und ich danke dir sehr :D

    http://russkajas.blogspot.de/

    AntwortenLöschen
  81. Dieser Kommentar wurde vom Autor entfernt.

    AntwortenLöschen
  82. Bei mir hat es sofort funktioniert, super!!! <333333

    AntwortenLöschen
  83. Vielen, vielen Dank!! Ich war schon am verzweifeln:D

    AntwortenLöschen
  84. TAUSEND DANK :D Nach einen halben Jahr kam ich mal auf die Idee es zu googlen und innerhalb von 10 Sek. habe ich ihn nun endlich mittig!
    Liebe Grüße
    Anita
    http://theapplepig.blogspot.de

    AntwortenLöschen
  85. Bin gerade dabei, meinen Blog einzurichten.
    Vielen lieben Dank für die vielen nützlichen Tipps!
    Als Laie ist man sonst tatsächlich etwas aufgeschmissen...

    mein-wohngefuehl.blogspot.com

    AntwortenLöschen
  86. Hat auf meinem Blog direkt funktioniert! Vielen besten Dank ♥

    Liebe Grüße, Caro
    www.carofee.blogspot.de

    AntwortenLöschen
  87. Hat sofort funktioniert!

    Vielen lieben Dank!!!!

    AntwortenLöschen
  88. Mann! was habe ich gesucht... endlich bin ich fuendig geworden! Vielen Dank fuer deinen so hilfreichen Post.

    Gruesse,
    Ania von Kaktus & Perronegro

    AntwortenLöschen
  89. Wenn alles NICHT funktioniert, bitte in den HTML-Modus gehen, nicht in den Vorlagendesigner!
    Dann bitte über das Kürzel STRG+F (Such-Modus) folgendes eingeben:
    /* Header

    Unter diesen setzt ihr direkt:
    #Header1_headerimg {
    margin: auto;
    }

    Anschauen, speichern, fertig. Das hat bei mir funktioniert.
    LG,
    Lily

    AntwortenLöschen
    Antworten
    1. Bzw. nach dem /* Header kommt noch eine Zeile mit -------------
      Unter diese ------- dann den Code einsetzen.

      Löschen
  90. Hallo :)

    Lange habe ich rumprobiert ... nun hat es endlich geklappt mit dem mittigen Header!

    Viiiiiiielen Dank :)

    Viele liebe Grüße

    Nina

    AntwortenLöschen
  91. Ich habe offenbar ein unlösbares Problem:
    Ich möchte nicht nur den Header, sondern den gesamten Blog zentrieren:
    Auf dem Computer zentriert sich www.chefwitze.de,
    aber nicht die mobile Version
    www.chefwitze.de/?m=1
    Auf dem Smartphone fällt das nicht auf, aber auf einem Tablet. Hier erscheint der Blog linksbündig, was doof aussieht. Und ich habe nach langem Googeln hierfür keine Lösung gefunden... ;-(

    AntwortenLöschen
  92. Ich hab so lange daran herumprobiert aber leider hat es nicht geklappt. Doch dann komme ich auf deine Anleitung und gefühlt eine Minute später hat es auch geklappt und ich bin verliebt.
    Vielen Dank dafür!

    LG Chrissi
    http://chrissella.blogspot.de/

    AntwortenLöschen
  93. Super..vielen Dank! Hat super funktioniert!
    Herzensgrüassli
    Yvonne

    AntwortenLöschen

Danke für dein Kommentar! Bitte beachte, dass Beleidigungen & Spam ohne Vorwarnung gelöscht werden. Bitte hab Verständnis dafür, dass wir nicht alle Kommentare beantworten können!

Falls ein Tutorial nicht funktioniert hat, dann schreibe bitte in deinem Kommentar genau, was nicht funktioniert & deinen Bloglink. So kann dir besser geholfen werden!

Du möchtest dich direkt an Mira wenden, um ein Problem zu lösen oder ein Design erstellen zu lassen? Dann schaue doch hier vorbei und melde dich!

Hinweis: Nur ein Mitglied dieses Blogs kann Kommentare posten.