书签 分享 收藏 举报 版权申诉 / 27
立即下载 加入VIP,免费下载
当前位置： 首页 > 求职职场 > 简历 > CSS垂直居中网页布局实现的5种方法.docx

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

  • 文档编号：20105000
  • 上传时间：2023-04-25
  • 格式：DOCX
  • 页数：27
  • 大小：281.09KB

#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

举报
举报 版权申诉
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载
配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：
CSS 垂直 居中 网页 布局 实现 方法
提示  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
关于本文
本文标题：CSS垂直居中网页布局实现的5种方法.docx
链接地址：https://www.bdocx.com/doc/20105000.html

热门标签

关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2022 冰点文档网站版权所有

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

收起
在线客服
意见反馈
返回顶部
展开
QQ交谈
返回顶部