CSS垂直居中网页布局实现的5种方法.docx

上传人:b****2 文档编号:20105000 上传时间:2023-04-25 格式:DOCX 页数:27 大小:281.09KB
下载 相关 举报
CSS垂直居中网页布局实现的5种方法.docx_第1页
第1页 / 共27页
CSS垂直居中网页布局实现的5种方法.docx_第2页
第2页 / 共27页
CSS垂直居中网页布局实现的5种方法.docx_第3页
第3页 / 共27页
CSS垂直居中网页布局实现的5种方法.docx_第4页
第4页 / 共27页
CSS垂直居中网页布局实现的5种方法.docx_第5页
第5页 / 共27页
点击查看更多>>
下载资源
资源描述

CSS垂直居中网页布局实现的5种方法.docx

《CSS垂直居中网页布局实现的5种方法.docx》由会员分享,可在线阅读,更多相关《CSS垂直居中网页布局实现的5种方法.docx(27页珍藏版)》请在冰豆网上搜索。

CSS垂直居中网页布局实现的5种方法.docx

CSS垂直居中网页布局实现的5种方法

ThereareafewdifferentwaystoverticallycentreobjectswithCSS,butitcanbedifficulttochoosetherightone.I’llshowyouallthebestwaysI’veseenandalsohowtocreateanicelittlecenteredwebsite.

VerticalcenteringwithCSSisn’taneasythingtodo.Therearemanydifferentwaysthatmaynotworkinsomebrowsers.Let’sreview5differentwaystoverticallycenteringobjects,aswellastheprosandconsofeachmethod.(Youcanseemytestpagebrieflyexplainingallofthem.)

Method1

Thismethodsetssome

stodisplaylikeatable,sowecanusethetable’svertical-alignproperty(whichworksverydifferentlyforotherelements).

Contentgoeshere

#wrapper{display:

table;}

#cell{display:

table-cell;vertical-align:

middle;}

TheGoods

∙Thecontentcandynamicallychangeheight(doesn’thavetobedefinedinCSS)

∙Contentdoesn’tgetcutoffwhenthereisn’tenoughroominthewrapper

TheBads

∙Doesn’tworkinInternetExplorer(noteventheIE8beta)

∙Lotsofnestedtags(notreallythatbad,thisisasubjectivetopic)

Method2

Thismethodwilluseanabsolutelypositioneddiv,whichhasthetopsetto50%andthetopmarginsettonegativehalftheheightofthecontent.Thismeanstheobjectmusthaveafixedheight,thatisdefinedbyCSS.

Becauseithasafixedheight,youmaywanttosetoverflow:

auto;tothecontentdiv,soifthereistoomuchcontenttofitin,ascrollbarwillappear,insteadofthecontentcontinuingonoutsidethediv!

<divid="content">

ContentHere

</div>

#content{position:

absolute;top:

50%;height:

240px;margin-top:

-120px;/*negativehalfoftheheight*/}

TheGoods

∙Worksinallbrowsers

∙Doesn’trequirenestedtags

TheBads

∙Whenthereisn’tenoughspace,thecontentdisappears(suchaswhenthedivisinsidethebodyandtheusershrinksthebrowserwindow,ascrollbarwillnotappear)

Method3

Inthismethod,wewillinsertadivabovethecontentelement.Thiswillbesettoheight:

50%;andmargin-bottom:

-contentheight;.Thecontentwillthenclearthefloatandendupinthemiddle.

Contenthere

#floater{float:

left;height:

50%;margin-bottom:

-120px;}

#content{clear:

both;height:

240px;position:

relative;}

TheGoods

∙Worksinallbrowsers

∙Whenthereisn’tenoughspace(ie.thewindowshrinks)ourcontentwillnotbecutoff,andascrollbarwillappear.

TheBads

∙OnlyoneIcanthinkofisthatitrequiresanextraemptyelement(whichisn’tthatbad,anothersubjectivetopic)

Method4

Thismethodusesaposition:

absolute;divwithafixedwidthandheight.Thedivisthentoldtostretchtotop:

0;bottom:

0;.Itcan’tbecauseofthefixedheight,somargin:

auto;willmakeitsitinthemiddle.Thisissimilartousingtheverycommonmargin:

0auto;tohorizontallycentreblockelements.

Contenthere

#content{position:

absolute;top:

0;bottom:

0;left:

0;right:

0;

margin:

auto;height:

240px;width:

70%;}

TheGoods

∙Easy

TheBads

∙Doesn’tworkinInternetExplorer(doesworkinIE8Beta)

∙Contentiscutoffwithoutscrollbarifthereisn’tenoughroominthecontainer

Method5

Thismethodwillonlycentreasinglelineoftext.Simplysettheline-heighttotheheightoftheobject,andthetextsitsinthemiddle

Contenthere

#content{height:

100px;line-height:

100px;}

TheGoods

∙Worksinallbrowsers

∙Doesn’tgetcutoffwhentheisn’tenoughspace

TheBads

∙Onlyworksontext(noblockelements)

∙Whenthereismorethanasingleline(likewhenitwraps),itbreaksbadly

Thismethodisveryusefulonsmallelements,suchastocentrethetextinsideabuttonorsingle-linetextfield.

WhichMethod?

Myfavouritemethodisnumber3—usingafloaterandclearingthecontent.Itdoesn’thaveanymajordownsides.Becausethecontentwillclear:

both;,youcanalsoputotherelementsaboveit,andwhenthewindowscollapses,thecenteredcontentwillnotcoverthemup.Seethedemo.

Title

ContentHere

#floater{float:

left;height:

50%;margin-bottom:

-120px;}

#top{float:

right;width:

100%;text-align:

center;}

#content{clear:

both;height:

240px;position:

relative;}

Nowyouknowhowitworks,let’sstartcreatingasimplebutinterestingwebsite!

Thefinalproductwilllooksomethinglikethis:

Step1

It’salwaysgoodtostartwithsemanticmarkup.Thisishowourpagewillbestructured:

∙#floater(topushthecontentintothemiddle)

∙#centred(thecentrebox)

o#side

▪#logo

▪#nav(unorderedlist

 

 

PageTitle

 

Holisticlyre-engineervalue-addedoutsourcingafterprocess-centriccollaborationandidea-sharing.

Energisticallysimplifyimpactfulnichemarketsviaenabledimperatives.

Holisticlypredominatepremiuminnovationaftercompellingscenarios.

Seamlesslyrecaptiualizehighstandardsinhumancapitalwithleading-edgemanufacturedproducts.

Distinctivelysyndicatestandardscompliantschemasbeforerobustvortals.

Uniquelyrecaptiualizeleveragedweb-readinessvis-a-visout-of-the-boxinformation.

 

Heading2

 

Efficientlyembracecustomizedweb-readinessratherthancustomerdirectedprocesses.

Assertivelygrowcross-platformimperativesvis-a-visproactivetechnologies.

Convenientlyempowermultidisciplinarymeta-serviceswithoutenterprise-wideinterfaces.

Convenientlystreamlinecompetitivestrategicthemeareaswithfocusede-markets.

Phosfluorescentlysyndicateworld-classcommunitiesvis-a-visvalue-addedmarkets.

Appropriatelyreinventholisticservicesbeforerobuste-services.

 

 

 

Copyrightnoticegoeshere

Step2

NowwewillstartwithsomebasicCSStolayoutthepage.Youshouldputthisinstyles.css,whichislinkedtoatthetopofourhtml.

html,body{

margin:

0;padding:

0;

height:

100%;

}

 

body{

background:

url('page_bg.jpg')50%50%no-repeat#FC3;

font-family:

Georgia,Times,serifs;

}

 

#floater{

position:

relative;float:

left;

height:

50%;margin-bottom:

-200px;

width:

1px;

}

 

#centered{

position:

relative;clear:

left;

height:

400px;width:

80%;max-width:

800px;min-width:

400px;

margin:

0auto;

background:

#fff;

border:

4pxsolid#666;

}

 

#bottom{

position:

absolute;

bottom:

0;right:

0;

}

 

#nav{

position:

absolute;left:

0;top:

0;bottom:

0;right:

70%;

padding:

20px;margin:

10px;

}

 

#content{

position:

absolute;left:

30%;right:

0;top:

0;bottom:

0;

overflow:

auto;height:

340px;

padding:

20px;margin:

10px;

}

Beforewecanmakeourcontentverticallycentred,thebodyandhtmlmustbestretchedto100%height.Becausetheheightisinsidethepaddingandmargin,wehavetomakethem0soascrollbardoesn’tappearjusttoshowyoualittlemargin.

Thefloater’smargin-bottomishalfofthecontent’sheight(400px),whichis-200px.

Youshouldnowhavesomethingthatlookslikethis:

Thewidthof#centeredis80%.Thisistomakeyoursitesmallonsmallscreensandwideonbiggerscreens(onmymedium-largescreen,manyoldwebsitesaresmallinthetopleftcorner,anditisalittleannoying).Thisisknownashavingaliquidlayout.min-widthandmax-widtharealsosettostopitgettingtoobigortoosmall.InternetExplorerdoen’tsupportmin&maxwidtghthough.Obviously,youmaychoosetohaveafixedwidthinstead.

Because#centeredisposition:

relative,wecanuseuseabsolutepositioninginsideittopositiontheelements.overflow:

auto;wasusedon#content,soascrollbarwillappearwhenthecontentdoesn’tfitinsideit.InternetExplorerdoesn’tlikeoverflow:

auto;unlesswetellittheheight(notjusttopandbottomposition,andnotin%)sowedidthataswell.

Step3

Thelastthingtodoisaddsomemorestylestomakeitlookabitnicer.Letsstartwiththemenu.

#navul{

list-style:

none;

padding:

0;margin:

20px000;text-indent:

0;

}

 

#navli{

padding:

0;margin:

3px;

}

 

#navlia{

display:

block;background-color:

#e8e8e8;

padding:

7px;margin:

0;

text-decoration:

none;color:

#000;

border-bottom:

1pxsolid#bbb;

text-align:

right;

}

 

#navlia:

:

after{

content:

'»';color:

#aaa;font-weight:

bold;

display:

inline;float:

right;

margin:

02px05px;

}

 

#navlia:

hover,#navlia:

focus{

background:

#f8f8f8;

border-bottom-color:

#777;

}

 

#navlia:

hover:

:

after{

margin:

0007px;color:

#f93;

}

 

#navlia:

active{

padding:

8px7px6px7px;

}

Thefirstthingtodowhenturningalistintoamenukindofthingistoremovethedotpointswithlist-style:

noneandallthemarginandpadding.Ifyouwantitt

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 求职职场 > 简历

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1