Tipps & Tutorials, tutorial

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_header img {
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 🙁

116 Comments

  1. Kim Barbie

    8. January 2011 at 12:22

    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

  2. rosarot

    12. January 2011 at 18:24

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

  3. Felia

    12. January 2011 at 20:29

    bei mir auch nicht 😮

  4. Corina

    19. January 2011 at 14:06

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

    http://www.ryf-style.blogspot.com

  5. snoWhite

    23. January 2011 at 11:16

    OH MEIN GOTT 😉 ENDLICH!!
    dankeeee
    hat sofort geklappt 😀

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

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

    XOXO S.

  6. A*

    17. February 2011 at 16:27

    bei mir funktioniert es leider auch nicht, wahrscheinlich liegt es an der vorlage.

  7. Prinzessin Lillifee

    10. March 2011 at 21:03

    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

  8. Bella-Luna

    20. May 2011 at 7:20

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

  9. Lisa

    14. June 2011 at 13:26

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

  10. hellyeah

    30. August 2011 at 13:24

    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

  11. LittleMissSunshine

    8. October 2011 at 14:37

    Bei mir ging auch nur der zweite Code 🙂 Aber danke für das Tut! 🙂 Hab ewig im Quelltext rumgesucht und nix gefunden! 🙂

  12. Elisa

    3. December 2011 at 11:47

    danke,ihr seid toll!:)

  13. Sani

    12. December 2011 at 17:04

    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… :/

  14. luna

    15. December 2011 at 0:28

    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

  15. isabel

    29. December 2011 at 22:30

    bei mir funktioniert es leider auch nicht. kann es vielleicht daran liegen, dass ich kein bild als header habe, sonderen nur schrift ? 😮

  16. My

    30. December 2011 at 17:18

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

  17. Sandra

    5. January 2012 at 18:39

    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?

  18. Louisa

    7. January 2012 at 12:16

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

  19. Kultur und Stil

    12. January 2012 at 19:44

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

    .Header {
    text-align: center;
    }

    1. Luri

      9. April 2012 at 14:55

      danke! der code funzt endlich mal!

    2. pauula

      15. November 2012 at 18:01

      Ja stimmt mit dem Code hat es funktionier.DANKE!!!!

    3. Mai

      23. November 2012 at 16:14

      oh man, Danke! Die anderen gingen bei mir nicht, aber mit dem klappt es 🙂
      mais-lifestyleblog.blogspot.de

    4. Bella

      5. February 2013 at 16:08

      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

    5. Hans Bauer

      6. February 2013 at 17:01

      Danke!! Funktioniert super!!
      (Auch danke für das tolle Tutorial von Copy Paste Love 😀 )

    6. Anonym

      19. May 2014 at 14:16

      Dankeeeeeeeeeee, du bist ein Schatz! Jetzt funktioniert es auch bei mir!

    7. Anonym

      26. March 2016 at 21:02

      Dankeschön! Es hat sofort funktioniert

    8. Amy

      11. October 2016 at 15:22

      Danke dir, der hat funktioniert 🙂

  20. Belora

    15. January 2012 at 21:41

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

  21. Ady

    15. January 2012 at 23:35

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

  22. Steffü

    22. January 2012 at 16:37

    Danke…Könnt ihr mir sagen wie mal die tabs zentriert?

  23. kimlynnlove

    28. January 2012 at 20:07

    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:

  24. Anonym

    30. January 2012 at 13:52

    Woah danke 😀

  25. frau♥Kaeptn

    8. February 2012 at 21:17

    Danke, bei mir hat´s nach mehreren Versuchen gut funktioniert!

  26. Steph

    9. February 2012 at 17:31

    mit dem zweiten hat es bei mir auch geklappt! danke für diesen wundervollen tipp!!

  27. ~Nicole~

    17. February 2012 at 14:54

    Danke! es hat auch gleich funktioniert… und ich dachte ich müsste mit dem linksseitigen Header leben…

    Grüße

  28. Bine

    17. February 2012 at 18:55

    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

  29. Anna

    20. February 2012 at 22:45

    Ich hab auch einfach das letzte Zeichen weggelassen und dann klappte es auch be mir! Diese Seite ist echt ein Segen! DANKE! 🙂

    1. schneeflocke

      26. February 2012 at 13:25

      Ja das geht! super, danke!

  30. LOLA

    25. February 2012 at 12:05

    es funktioniert nicht! woran könnte das liegen?

  31. schneeflocke

    26. February 2012 at 13:24

    funktioniert nicht 🙁 aber is auch nicht soo wichtig

  32. C.K.

    26. February 2012 at 14:34

    Danke,ich liebe dich dafür 😀

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

  33. MissBlueberrymuffin

    27. February 2012 at 19:43

    Viiiiiiiilen Dank! Code 2 mit weggelassenen letzten Zeichen hat funktioniert 🙂 Bin überglücklich!

    http://missblueberrymuffin.blogspot.com/

    1. Joe

      11. March 2012 at 12:16

      welches zeichen hast du weggelassen?

  34. Danatomy

    2. March 2012 at 22:39

    Bei mir geht's leider nicht :/

  35. Joe

    11. March 2012 at 12:14

    Bei mir geth's auch nicht. Wieso?

  36. TheSongbyrd

    12. March 2012 at 16:11

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

  37. nicola ▲

    9. April 2012 at 20:28

    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?

  38. Margarita

    30. April 2012 at 19:57

    Warum funktiuniert das nicht blöder header:(

  39. Margarita

    2. May 2012 at 17:23

    An alle bei dennen es nicht funktiuniert, ihr müsst eine andere Vorlage nehmen!

  40. Annanikabu

    21. May 2012 at 19:57

    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

  41. Anonym

    8. July 2012 at 3:00

    Bei mir funktioniert nur der zweite Code:

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

    Vielen Dank! <3

    http://lilienwolf.blogspot.com

  42. nyiloveyou

    16. July 2012 at 16:38

    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 🙁

    http://www.nyiloveyou-nyiloveyou.blogspot.com

  43. DieJai

    17. July 2012 at 6:37

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

  44. Anonym

    18. July 2012 at 8:21

    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 ?

  45. Anonym

    20. July 2012 at 9:30

    Hej (;
    Kann man den header auch rechtsbündig machen ? <3

  46. Julie

    20. July 2012 at 16:36

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

  47. Fantastin

    10. August 2012 at 7:17

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

    LG,
    Nicole

  48. Sophia

    2. September 2012 at 19:40

    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

  49. Marlene Bo

    16. September 2012 at 18:00

    Hey, das mit dem Header hat super geklappt 😉

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

  50. Tami

    13. October 2012 at 10:35

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

  51. Maja..x3

    16. October 2012 at 16:07

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

  52. Koko

    23. October 2012 at 19:56

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

  53. Heimatherz

    6. November 2012 at 16:48

    Danke! Diese Seite ist wirklich so toll, weiter so!

  54. Lena Schnittker

    9. November 2012 at 15:05

    Hat sofort geklappt, vielen Dank! lg Lena

  55. Jules yllw

    19. November 2012 at 13:17

    ich hab zwar den header zentriert, aber wie bekomme ich ihn jetzt wieder nach links??? bitte helft mir 🙁

  56. Ribambelle

    21. November 2012 at 15:18

    Wow, hat sofort geklappt.
    Danke für das Tutorial 😀

  57. Anonym

    12. December 2012 at 14:21

    DAAAAANNNKKKEEEEE!!! 😀

  58. pollinpollin

    16. December 2012 at 12:34

    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!

    1. pollinpollin

      16. December 2012 at 12:45

      Hab's gerade hingekriegt, also hat sich erledigt 😉

  59. Claro

    19. December 2012 at 14:58

    Super ,danke schön! 🙂 Ich wollte schon immer wissen, wie das geht!

    LG !

  60. Sassiak

    5. January 2013 at 19:05

    Hat sofort geklappt. Vielen Dank. 🙂

  61. dk

    6. January 2013 at 20:26

    oh DANKE daran hab ich schon so lange getüftelt!
    danke danke danke !!!

  62. litte miss

    13. January 2013 at 13:51

    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

  63. soph

    15. January 2013 at 15:52

    Könnt ihr mir auch sagen, wie ich das wieder rückgängig machen kann? 🙂
    LG, Sophia 🙂

    http://www.lifeiswoonderfull.blogspot.de

  64. Vica Vanilleeis

    26. February 2013 at 17:46

    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

  65. Claro ♥

    2. April 2013 at 13:49

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

  66. Pia

    19. April 2013 at 14:34

    Bei mir funktioniert das leider nicht 🙁

    1. Pia

      19. April 2013 at 17:17

      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/

  67. travelcat

    12. May 2013 at 12:58

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

  68. EmAndAm D.

    27. June 2013 at 16:37

    Funktioniert das auch, wenn man nur Schrift hat oder muss man ein richtiges Bild als Header haben?

  69. Dina

    3. July 2013 at 16:29

    Super! ewig geschaut wo mans einstellen kann! vielen Dank.

  70. PourFemme

    3. September 2013 at 15:57

    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

  71. BuntesPergament

    21. September 2013 at 17:35

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

  72. chestnut

    13. October 2013 at 11:56

    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 🙂

  73. Udo Franz

    16. December 2013 at 7:48

    Danke schön es hat mir weitergeholfen!

  74. Andrea

    18. December 2013 at 16:10

    Super, hat geklappt. Danke.

  75. Ela

    31. December 2013 at 15:13

    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

  76. Annabell Yildiz

    1. January 2014 at 16:00

    bei mir funktioniert das nicht! 🙁

  77. Morayo Odukoya

    11. January 2014 at 14:56

    Bei mir klappt es nicht………weiß nicht warum,Schade aber.

  78. Morayo Odukoya

    11. January 2014 at 14:59

    Bei mir klappt es nicht………weiß nicht warum,Schade aber.

  79. Nagellack-Junkie

    25. March 2014 at 19:21

    Vielen Dank! Endlich ist mein Header mittig ausgerichtet 🙂

    Liebe Grüße
    Isabel

  80. Rezept Schachtel

    27. March 2014 at 21:04

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

  81. David Castiglione

    6. April 2014 at 15:25

    Nach wie vor aktuell und funktioniert. Vielen Dank!

  82. Anonym

    21. April 2014 at 15:01

    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 😀

    http://russkajas.blogspot.de/

  83. Yaling

    1. June 2014 at 13:13

    Bei mir hat es sofort funktioniert, super!!! <333333

  84. Mimi Menninghaus

    30. June 2014 at 15:22

    Vielen, vielen Dank!! Ich war schon am verzweifeln:D

  85. Anita

    6. August 2014 at 8:35

    TAUSEND DANK 😀 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

  86. Wohngefühl

    9. August 2014 at 9:45

    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

  87. Caro fee

    20. August 2014 at 7:26

    Hat auf meinem Blog direkt funktioniert! Vielen besten Dank ♥

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

  88. Lina

    15. December 2014 at 12:38

    Hat sofort funktioniert!

    Vielen lieben Dank!!!!

  89. Kaktus&Perronegro

    16. February 2015 at 21:24

    Mann! was habe ich gesucht… endlich bin ich fuendig geworden! Vielen Dank fuer deinen so hilfreichen Post.

    Gruesse,
    Ania von Kaktus & Perronegro

  90. Anonym

    23. February 2015 at 0:13

    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

    1. Anonym

      23. February 2015 at 0:14

      Bzw. nach dem /* Header kommt noch eine Zeile mit ————-
      Unter diese ——- dann den Code einsetzen.

  91. Ninas Beauty - Bouquet

    15. April 2015 at 19:38

    Hallo 🙂

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

    Viiiiiiielen Dank 🙂

    Viele liebe Grüße

    Nina

  92. Martin Kuster

    5. May 2015 at 16:59

    Ich habe offenbar ein unlösbares Problem:
    Ich möchte nicht nur den Header, sondern den gesamten Blog zentrieren:
    Auf dem Computer zentriert sich http://www.chefwitze.de,
    aber nicht die mobile Version
    http://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… ;-(

  93. Chrissi

    20. February 2017 at 11:49

    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/

  94. yvonne zaugg

    16. January 2018 at 20:40

    Super..vielen Dank! Hat super funktioniert!
    Herzensgrüassli
    Yvonne

Leave a Reply