.svg "Sedang Trending")
4 minggu yang lalu
In nan early days of nan internet, centering thing connected a webpage was easy: Just put a <center> tag connected it.
When it revised nan HTML to type 4.0, however, nan World Wide Web Consortium (W3C) deprecated nan halfway tag, successful its enthusiasm for separation of concerns. Ease of usage was sacrificed for architectural purity. And centering things someway became nan state of Cascading Style Sheets.
This proved to beryllium problematic successful that location was thing successful spot to switch nan effective but architecturally incorrect halfway tag directly. The W3C provided a database of caller layout elements (header, nav, aside), but nary of those helped nan coder proportionality elements wrong nan page itself.
“Having studied grid layout, you will astir apt beryllium amazed really analyzable this each seems!” The Mozilla dev page actually stated connected nan now bequest methods nan web organization first embraced.
To beryllium fair, putting thing successful nan “middle” of a webpage is simply a philosophical conundrum, fixed nan canvas for HTML’s webpage is efficaciously infinite. It has nary sides, it has nary apical aliases bottom. So nan mediate must beryllium defined by immoderate canvas nan developers puts connected nan page (if they recognize they are expected to do that astatine all).
Divs “work by giving items a size, and pushing them astir to statement them up successful a measurement that looks for illustration a grid,”
–Mozilla Developer Network documentation.
It was a large inquire for a supposedly antiauthoritarian exertion for illustration nan web. It sent galore a web designer down a rabbit spread of confusion, which went connected for complete a decade until nan CSS Grid and CSS Flexbox came on to simplify things.
Still, a full procreation of websites were built without Grid aliases Flexbox, and coming are nary uncertainty still galore administrators who won’t touch nan bequest and very fussy codification for centering things, acrophobic that 1 excess aliases misplaced tag would illness their full tract design.
So location is simply a measurement to halfway elements connected a web page pinch Grid aliases Flexbox, that was assembled from community-generated champion practices. It’s each based astir nan HTML <div> tag.
Divvy Up Is What Div Does
The HTML <div> tag defines a section, aliases division, wrong a web document.
Divs are nan elements are correct below <body> successful nan level of an HTML document, conscionable arsenic <body> follows <head> and is hierarchically nether nan apical level <html> tag.
You tin deliberation of each <div> </div> group arsenic a benignant of a container, pinch which you tin style pinch CSS (or manipulate pinch JavaScript), by adding a class or id property of nan <div>. The id property refers to 1 circumstantial <div> of a web page; whereas class tin use to much than 1 <div>.
So <div> tin beryllium fixed a people name, and nan browser will execute that action for each members of nan class.
IDs work successful a akin way, isolated from they use identifiers by hashtags alternatively than a azygous starring dot.
Thus, nan easiest imaginable measurement to halfway a spot of contented connected a page is by utilizing a <div> tag to specify a contented area.
As Kevin Powell explains successful this adjuvant video, galore devs really telephone this <div> a container. Using class aliases id, they past group nan width of that instrumentality to 50% (half) of nan allotted size of that webpage. As nan size of nan browser model changes, nan instrumentality stays astatine a corresponding 50%.
The CSS width spot tin besides beryllium group pinch fixed lengths successful pixels (though fixed lengths tin beryllium problematic erstwhile changing nan size of nan model itself).
In nan codification snippet above, nan margin spot spaces nan matter from wrong nan instrumentality sides.the first number (“0”) sets nan abstraction supra and beneath nan text, nan 2nd (set present arsenic “auto”) is nan separator connected nan correct and near of nan text. These margins tin beryllium specified much precisely pinch lengths aliases percentages, if request be.
Make judge immoderate classes called are done truthful successful dumb quotes (“) not smart quotes.
The supra codification renders centers nan sample matter connected nan page:
Crazy that is nan easiest imaginable way acceptable to each browsers to halfway thing connected a webpage.
Most web designers require much centering than that, alas.
Balance Multiple Columns successful a Browser Window
First, though, a detour into nan world of nan CSS float property. The float spot was primitively designed for positioning images wrong of boxes. If nan image was smaller than nan box, should it align correct aliases near aliases up aliases down?
But hopeless web devs recovered that float, nevertheless tin beryllium utilized to position immoderate HTML element. Namely, it tin position smaller <divs> wrong nan instrumentality <div>.
A 2 file web page tin beryllium composed of 2 divs, 1 that floats near and nan different that floats to nan right. They request to beryllium balanced successful their proportions truthful they aren’t larger than nan container, or, for illustration excessively galore cats astatine a feeding bowl, that they don’t crowd each different out, and time off your tract each lopsided. You person to fig retired those numbers yourself.
In nan supra example, nan instrumentality is group astatine 90% of nan browser window, and 2 divs are group to return up 48% each of nan 100% that is fixed to nan instrumentality <div>. One is floated to nan right, and 1 is floated to nan left.
Here is really nan supra codification renders connected nan page:
Note that owed to a faulty measurement nan browsers bid nan calculations of sizing nan <div>, a patch, called Clear Fix, should beryllium added, besides arsenic a <div>. I don’t cognize really it works, but it is what W3C prescribes.
What astir 3 columns, nan favored for galore websites (including TNS itself, pinch nan thief of WordPress)? The champion attack is to play astir pinch nan properties of nan divs, and spot really they stack up successful nan browser window.
In nan supra example, some nan correct and near columns are fixed float directions to move them to nan correct and left, respectively, and nan mediate 1 is not fixed a float, truthful lands successful nan middle.
Also successful nan supra codification is simply a caller people called column, which allows nan <dev> to specify attributes that are nan aforesaid crossed each nan columns. Note really each constituent tin beryllium defined by aggregate classes (i.e. “left column” is really 2 classes).
The codification supra will render thusly:
As noted, aggregate file layouts tin beryllium much easy rendered coming pinch Grid and/or Flexbox, which we will screen successful early tutorials. For now, though, you tin return pridefulness successful being 1 of nan fewer developers who really cognize nan age-old conundrum of really to halfway a <div>.
YOUTUBE.COM/THENEWSTACK
Tech moves fast, don't miss an episode. Subscribe to our YouTube channel to watercourse each our podcasts, interviews, demos, and more.
Group Created pinch Sketch.
English (US) · 
Indonesian (ID) ·