H1 centeren in een header HTML5
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
/* CSS */
header{
background-color:#000;
}
header h1 {
color: red;
font-size: 28px;
font-weight: bold;
display: inline-block;
text-align: center;
width:100%;
}
header{
background-color:#000;
}
header h1 {
color: red;
font-size: 28px;
font-weight: bold;
display: inline-block;
text-align: center;
width:100%;
}
Code (php)
1
2
3
2
3
<header>
<h1>Dit is een titel van een webpagina</h1>
</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.
- Ariën -:
Gelieve in het vervolg bij code de [code][/code]-tags gebruiken.
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Hier kan je meer lezen over de mogelijke opmaakcodes.
Alvast bedankt!
Gewijzigd op 11/02/2017 15:59:47 door - Ariën -
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;
}
Gewijzigd op 11/02/2017 15:33:56 door Jan Graneker
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.
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.
• HTML: https://validator.w3.org/
• CSS: https://jigsaw.w3.org/css-validator/
Code (php)
1
2
3
4
5
6
2
3
4
5
6
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
Toevoeging op 11/02/2017 17:38:34:
Padding gebruiken kan overigens prima, maar werkt niet goed als je div ook in hoogte responsive is.
Ff een voorbeeld gemaakt. http://codepen.io/Goldenmonky/pen/GrwaWy?editors=1100
Zou ik de H1 en H2 ook via de top en bottom flexibel kunnen centreren?