How to center Div, table, and webpage display

 

How to center Div, table, and webpage display

There are many different methods to use CSS to implement vertical center of objects. It is difficult to choose the correct method. I will explain the good methods I have seen and how to create a good Center website. It is not easy to use CSS to implement vertical center. Some methods are invalid in Some browsers. Next, let's take a look at five different methods for vertical object concentration, as well as their respective advantages and disadvantages. (Check it out. The test page provides a brief explanation .) Method 1: This method sets the display method of some divs to table, so we can use the vertical-align property attribute of the table. <Div id = "wrapper"> <Div id = "cell"> <Div class = "content"> Content goes here </div> </Div> </Div> # wrapper {display: Table ;} # Cell {display: Table-cell; Vertical-align: middle ;} Advantages: Content can dynamically change the height (not defined in CSS ). Content is not truncated when wrapper does not have enough space Disadvantages: Internet Explorer (or even IE8 beta) is invalid, and many nested labels (not so bad, another topic) Method 2: This method uses an absolutely positioned Div and sets its top to 50%, and top margin to a negative content height. This means that the object must specify a fixed height in CSS. Because there is a fixed height, you may want to specify overflow: auto for content, so that if there is too much content, a scroll bar will appear to avoid content overflow. <Div class = "content"> Content goes here </div> # Content { Position: absolute; Top: 50%; Height: 240px; Margin-top:-120px;/* negative half of the height */ } Applicable to all browsers No need for nested tags Disadvantages: When there is not enough space, the content will disappear (similar to the case where the DIV is in the body, when the user narrowing down the browser window, the scroll bar will not appear) Method 3: This method inserts a div outside the content element. Set the DIV Height: 50%; margin-bottom:-contentheight ;. Content is cleared and displayed in the middle. <Div id = "floater"> <Div id = "content"> Content here </div> </Div> # Floater {float: Left; Height: 50%; margin-bottom:-120px ;} # Content {clear: Both; Height: 240px; position: relative ;} Advantages: Applicable to all browsers Content is not truncated when there is not enough space (for example, window narrowing), and the scroll bar appears Disadvantages: The only thing I can think of is the need for additional null elements (not that bad, but another topic) Method 4: This method uses a position: absolute, div with fixed width and height. This div is set to top: 0; bottom: 0 ;. However, because it has a fixed height, it cannot be separated from the upper and lower distances to 0, so margin: auto; will center it. It is easy to use margin: auto; to vertically center block-level elements. <Div id = "content"> Content here </div> # Content { Position: absolute; Top: 0; Bottom: 0; Left: 0; Right: 0; Margin: auto; Height: 240px; Width: 70%; } Advantages: Simple Disadvantages: IE (IE8 beta) is invalid When there is not enough space, the content is truncated, but no scroll bar appears. Method 5: This method can only include a single line of text. You only need to set line-height to the height value of the object to center the text. <Div id = "content"> Content here </div> # Content {Height: 100px; line-Height: 100px ;} Advantages: Applicable to all browsers Not truncated when there is not enough space Disadvantages: Valid only for text (Block-level elements are invalid) When multiple rows are running, the broken words are worse. This method is very useful for small elements, such as centering button text or single line text. Which method? I like method 3 most, but there are not many disadvantages. Because the content will clear the floating, you can place other elements on it, and when the window is scaled, The center content does not cover other elements. ViewExample. <Div id = "TOP"> <H1> title </Div> <Div id = "content"> Content here </div> # Floater {float: Left; Height: 50%; margin-bottom:-120px ;} # Top {float: Right; width: 100%; text-align: center ;} # Content {clear: Both; Height: 240px; position: relative ;} Now you know what is going on. Now we start to create a simple but interesting website. The final result is as follows: Step 1: It is good to start with semantic tags. Below is the structure of our page: # Floater/* set content to medium */ # Contred/* center box */ # Side # Logo # NAV/* unordered list */ # Content # Bottom/* copyright placement */ This is the xhtml I used.Code: A centred Company <Div id = "centered"> <Div id = "side"> <Div id = "logo"> <Strong> <span> A </span> company </strong> </div> <Ul id = "nav"> <Li> <a href = "#"> Home </a> </LI> <Li> <a href = "#"> Products </a> </LI> <Li> <a href = "#"> blog </a> </LI> <Li> <a href = "#"> contact </a> </LI> <Li> <a href = "#"> about </a> </LI> </Ul> </Div> <Div id = "content"> <H1> page title Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing. Energistically simplify impactful niche markets via enabled imperatives. Holisticly predominate premium innovation after compelling scenarios. Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products. Distinctively syndicate standards compliant schemas before robust vortals. Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information. <H2> heading 2 </H2> Efficiently embrace customized web-readiness rather than customer directed processes. Assertively grow cross-platform imperatives vis-a-vis proactive technologies. Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces. Conveniently streamline competitive strategic theme areas with focused e-markets. Phosfluorescently syndicate world-class communities vis-a-vis value-added markets. Appropriately reinvent holistic services before robust e-Services. </div> </Div> <Div id = "bottom"> Copyright notice goes here </div> Step 2: Now we start to use some basic CSS to add styles to the page. Put the following code into the style.css introduced at the top of our HTML page. HTML, body { margin: 0; padding: 0; Height: 100%; }< br> body { Background: url('page_bg.jpg ') 50% 50% no-repeat # FC3; font-family: georgia, times, serifs; }< BR ># floater { position: relative; float: Left; Height: 50%; margin-bottom: -200px; width: 1px; }< BR ># centered { position: relative; clear: Left; Height: 400px; width: 80%; max-width: 800px; Min-width: 400px; margin: 0 auto; Background: # FFF; border: 4px solid #666; }< BR ># bottom { position: absolute; bottom: 0; Right: 0; }< BR ># nav { position: absolute; left: 0; top: 0; bottom: 0; Right: 70%; padding: 20px; margin: 10px; }< BR ># content {< br> position: absolute; left: 30%; Right: 0; top: 0; bottom: 0; overflow: auto; Height: 340px; padding: 20px; margin: 10px; } Before we can vertically center content, the body and HTML should be stretched to a height of 100%. Since the height is within padding and margin, we need to set them to 0 to prevent the scroll bar from appearing because of a small margin. Floater's margin-bottom is half of the content height (PX),-PX. Now we can see the effect: # Centred is 80% in width. This allows the city page to change with the display size. It is generally called Fluid layout. Set Min-width and max-width to prevent the webpage from being too large or too small. However, ie does not support min/max-width. Obviously, it can be replaced by a fixed width. Because # centred is relatively positioned, in which we can use absolute positioning to locate elements. Set # Content overflow: auto; to avoid the appearance of the scroll bar. IE doesn't like overflow: auto very much. Unless we specify the height (not the top and bottom positioning, or %), we specify the height for it. Step 3: The last thing to do is add some more styles to make the page look better. Start with the directory. # Nav ul { List-style: none; Padding: 0; margin: 20px 0 0 0; text-indent: 0; } # Nav Li { Padding: 0; margin: 3px; } # Nav Li { Display: block; Background-color: # e8e8e8; Padding: 7px; margin: 0; Text-Decoration: none; color: #000; Border-bottom: 1px solid # BBB; Text-align: right; } # Nav Li A: After { Content: '»'; color: # AAA; font-weight: bold; Display: inline; float: right; Margin: 0 2px 0 5px; } # Nav Li A: hover, # nav Li A: Focus { Background: # f8f8f8; Border-bottom-color: #777; } # Nav Li A: hover: After { Margin: 0 0 0 7px; color: # f93; } # Nav Li A: active { Padding: 8px 7px 6px 7px; } Note that the # centred rounded corner is used. In css3, you should have the border-radius attribute to set the radius of the rounded corner (refer to the path of css3: border-radius (rounded corner)-sugar with tomato ). Currently, popular browsers are not supported, unless they are prefixed with-Moz (molilla Firefox) or-webit (Safari/WebKit. Compatibility considerations: As you may think, ie is the only troublesome browser. # Floater must specify the width. Otherwise, it will do nothing in any version of IE. In IE 6, the directory is interrupted by too much space. IE 8 has extra space (omitted by the author) More ideas: Using centered web pages can do a lot of interesting things. I'm re-designing Swfobject Generator 2.0.(Use Swfobject2.0This idea is used to generate code. Here is another idea. MATERIALS: The following are some of my reference materials. We recommend that you read them. Understanding vertical-align, or "How (not) to vertically center content" Vertical centering using CSS Vertical centering in CSS Sugar with tomatoes: Horizontal center is often used. In fact, vertical center is also very useful. Method 5 is the most commonly used. It's a little trick.