Hvordan Senter topper i CSS på WordPress

Hvordan Senter topper i CSS på WordPress


Header.php fil på en WordPress tema inneholder det temaet kode. På et minimum, inkluderer denne koden både HTML og PHP programmering. Cascading Style Sheet (CSS) kode --- vanligvis finner i style.css filen --- styrer utseendet og plasseringen av overskriften innhold. Du må redigere stilark koden for å sentrere en header i WordPress. Sett automatiske marginer til header i CSS for å gjøre nettleseren beregne en sentrert posisjon.

Bruksanvisning

1 Åpne nettleseren og laste wp-admin-katalogen av din WordPress nettsted. Skriv inn brukernavn og passord for å logge deg på dashbordet.

2 Naviger til "Editor" under "Utseende" for å laste "Edit Temaer" skjerm. Last header.php mal fil til redaktøren boksen ved å klikke på linken under "Maler" overskriften.

3 Finn settet med tags innpakning rundt spissen. Avhengig av tema og standard HTML brukes, kan du finne "<div>", "<header>" eller "<avsnitt>" koder. Finn ID tildelt til innpakning tag:

<Div id = "myheader">

Header innhold her ...

</ Div>

I eksempelet ovenfor, "myheader" er ID du trenger.

4 Load style.css i redigeringsprogrammet ved å klikke på linken nederst på listen over malfiler. Finn velgeren som er rettet mot din spissen. Her er et eksempel ved hjelp av "myheader" ID:

myheader {

bakgrunn: URL (sti / til / image.png) senter no-repeat;

bredde: 960 x;

height: 200px;

}

5 Legg til følgende CSS-koden mellom klammeparentes for "#myheader" velgeren:

margin-left: auto;

margin-right: auto;

Klikk på den blå "Update File" -knappen for å lagre arbeidet ditt.

Hint

  • Du må angi en bredde for din header å sentrere det riktig. Sett bredden til en prosentverdi hvis du ikke ønsker å bruke en statisk bredde for spissen.
  • Ovennevnte metode for sentrering fungerer ikke i Internet Explorer 6. Pakk header i et nytt sett med "<div>" tagger med en ID og sette "text-align" eiendom i CSS til "center" for å støtte den nettleseren.