Hvordan gjøre Vertikal Sentre med CSS
En måte å markere et element er å sentrere den loddrett på siden. Stilark har den vertikale-align eiendom med midterste verdien (vertical-align: midten) for å hjelpe deg å oppnå denne oppgaven. Stilark er CSS dokumenter som tillater brukere å bruke uniform innstillinger til flere web-sider eller sidedeler mens du endrer elementer i en sentral beliggenhet. Dessverre, Internet Explorer, en vanlig nettleser som du må vurdere når du utformer en webside, ikke fullt ut støtter den vertikale justere eiendommen. Gjennom en kombinasjon av CSS og HTML, kan du vertikalt sentrere elementene selv i Internet Explorer.
Bruksanvisning
1 Skriv inn element du ønsker å sentrere inne div koder <div> </ div> i kroppen <body> </ body> i HTML-dokumentet. Div koder definere utsnitt i HTML-dokumenter. I eksempelet nedenfor, er elementet et avsnitt <p> </ p>, men det kan være nesten hvilken som helst element, inkludert et bilde eller video.
<Div class = "box1">
<P> Dette er en sentrert vertikalt avsnitt, som er en type av element. </ P>
</ Div>
2 Skriv inn innstillingene for div container i stilarket <style> </ style> i overskriften <head> </ head>. Kommentarer er vedlagt i kommentarkoder /
/. Informasjon vedlagt i kommentarkoder er for din informasjon. Nettleseren din ignorerer dem.
<Style type = "text / css">
<! -
div.box1 / Angir plasseringen som innstillingene til følge gjelder. Div element med klassen "box1." /
{
height: 500px; / Gjør div boks 500 piksler høy. /
display: table-cell; / Forteller nettleseren for å behandle div container som en tabellcelle. /
vertical-align: middle; / Forteller nettleseren til vertikalt sentrere element (avsnitt). /
bakgrunn: red; / For visningsformål, slik at du kan se at avsnittet er sentrert i div container. /
}
->
</ Style>
3 Bruk valign eiendom i en tabell i kombinasjon med CSS for å justere et element vertikalt i Internet Explorer. Den vertikale-align eiendom med den midterste verdien støttes ikke i Internet Explorer. Inkluder CSS vertikale-align eiendom for nettlesere som gjenkjenner denne egenskapen. Dette eksempelet illustrerer også en innebygd stilark.
<Html>
<Head>
<Title> Tabell VA </ title>
</ Head>
<Body>
<Table style = "height: 500px; border: 0px solid tan; padding: 0px; bakgrunn: tan; vertical-align: middle">
<Tr>
<Td valign = midten> vertikalt i alle nettlesere. </ Td>
</ Tr>
</ Table>
</ Body>
</ Html>
Hint
- Kopier og lim inn koden i HTML-dokumentet og redigere det i henhold til dine preferanser for å skape vertikalt innrettede elementer ved hjelp av CSS i HTML-dokumentet.