PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

H1 centeren in een header HTML5

Door Jan Graneker op 11-02-2017 15:19 gewijzigd op 11-02-2017 15:59
2.511 views
Goedemiddag allemaal,

Deze noob heeft even jullie hulp nodig. Ik ben begonnen met het oppakken van HTML5 en alle veranderen die daarbij horen.

Nu heb ik het volgende:

/* CSS */ 

header{
  background-color:#000;
}

header h1 {
color: red;
font-size: 28px;
font-weight: bold;
display: inline-block;
text-align: center; 
width:100%; 
}



<header>
     <h1>Dit is een titel van een webpagina</h1>
</header>


De header is standaard een block-type dus deze is over de gehele breedte. Dit is eigenlijk de H1 ook maar deze heb ik dus veranderd naar een inline-block.
Nu heb ik hem wel gecentreerd qua breedte, maar hoe centreer ik hem qua hoogte, zonder dat de Header groter wordt.
Ward van der Put
11-02-2017 15:26
Wil je de kop horizontaal én verticaal centreren, dus midden op het scherm tonen?
Jan Graneker
11-02-2017 15:32 gewijzigd op 11-02-2017 15:33
Inderdaad Ward, wel binnen de header. Ik heb er nu het volgende van gemaakt. In dit geval heb ik de padding-top en bottom aangepast. Zo is de tekst altijd gecentreerd.
Is dit volgens het W3c, of is er nog een andere manier, zodat ik de header wel een BG color kan geven ipv de h1.

Wellicht dat mijn denkwijze gewoon verkeerd was/is om eerst de header een achtergrond kleur mee te geven i.p.v. de h1.


header h1{
color: red;
font-size: 28px;
font-weight: bold;
display: inline-block;
width:100%;
text-align:center;
background-color:#000;
padding-top:40px;
padding-bottom:40px;
margin:0;
}
Ward van der Put
11-02-2017 15:40
Ik denk dat je deze richtlijnen van Google eerst wilt lezen: What Makes a Good Mobile Site?

Je moet gebruikers namelijk front and center (waar je nu aan knutselt) en boven de vouw iets nuttigs bieden. Alleen naar een titel kijken valt daar niet onder. Moeten scrollen om iets nuttigs te ontsluiten is een overbodige handeling.
Jan Graneker
11-02-2017 15:45
Bedankt voor de input Ward.
Het bovenste is gewoon een test. Het zou net zo goed in een <section><h1><secion> kunnen staan.

Mijn vraag is, is het bovenstaande goede code, want mijn H1 valt nu perfect in de header.

Sorry voor mijn onduidelijkheid altijd lastig uitleggen.
M
Marlies Maalderink
11-02-2017 17:34
Je wilt gewoon tekst in een div zowel horizontaal als verticaal centreren? Ongeacht de grootte van de div (als hij responsive is?) Dan zoek je dit:


  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;


[size=xsmall]Toevoeging op 11/02/2017 17:38:34:[/size]

Padding gebruiken kan overigens prima, maar werkt niet goed als je div ook in hoogte responsive is.

Reageren

Inloggen om te reageren