Hoe centraal ik een H1 in het lichaam

Ik heb geprobeerd mijn H1 in de body tag als volgt te centreren:

h1 {margin:0 auto}

http://jsfiddle.net/qpdwy/

Maar het is niet centraal. Hoe repareer ik het?


Antwoord 1, Autoriteit 100%

In dit geval:

h1 {
    text-align:center;
}

JSFiddle Voorbeeld

De marge: Auto-regel wordt gebruikt wanneer u een breedte op het element instelt, dat u niet hebt gedaan.


Antwoord 2, Autoriteit 7%

U kunt het centreren door de breedte in te stellen.

<body>
     <h1>My Title</h1>
</body>

CSS

h1 {
    width:500px;
    margin: 0 auto;
    background: gray;
    text-align: center;
}

Antwoord 3

U kunt dit alternatief proberen:

h1 {
    text-align: center;
    margin: 0px auto;
    display; block;
}

Antwoord 4

-Div Style = “Marge: 0 Auto; Text-uitlijnen: links; Breedte: 80px;” –
sample

Wijzig de breedte om de positie

te wijzigen


Antwoord 5

Wat J09691 zei werkt, maar niet de hele tijd.

Daarom gebruik ik:

/* Put this inside element/class. */
transform: translateX(400px);

Als het niet in het midden van het scherm voor u past, pas deze dan gewoon aan.
Natuurlijk zou je wat CSS en / of JS Magic kunnen gebruiken om het automatisch aan te passen.


Antwoord 6

text-align: centeris de beste keuze, maar als u het nog steeds wilt centreren met behulp van margin: 0 autoU hebt een breedte aan H1(een blok) element.

U kunt een element van een blokniveau centreren door het marge-links en
margin-rechts van auto (en het heeft een ingestelde breedte, anders zou het zijn
Volledige breedte en zou niet hoeven centreren
). Dat is vaak gedaan met
Sorthand als volgt:

.center-me {
  margin: 0 auto;
}

bron:
https://css-tricks.com/centering-css-complete -Gouden / # horizontaal-blok

Other episodes