Home > Article > Web Front-end > CSS Web Page Layout Introductory Tutorial 3: One Column with Fixed Width and Centered_Basic Tutorial
CSS Web Page Layout Introductory Tutorial 3: One Column with Fixed Width and Centered_Basic Tutorial
- PHP中文网Original
- 2016-05-16 12:07:201827browse
css web page layout introductory tutorial 3: one column with fixed width centered_basic tutorial
the overall centering of the page is the most commonly used form in web design. in traditional table layout, we use the align="center" attribute of the table to achieve this. p itself also supports the align="center" attribute, which can also make p appear centered. however, the css layout is to achieve the separation of performance and content, and the align attribute is a style code written in the p attribute of xhtml. it goes against the principle of sharing (separation can make your website more manageable), so the content should be centered using css. let’s take a fixed-width column layout code as an example and add a centered css style to it:
the code is as follows:
#layout {
border: 2px solid #a9c9e2;
background-color: #e8f5fe;
height: 200px;
width: 300px;
margin:0px auto;
}
the margin attribute is used to control the outer margins in the top, right, bottom and left directions of the object. when margin uses two parameters, the first parameter represents the top and bottom margins, and the second parameter represents the left and right margins. in addition to directly using numerical values, margin does not support a value called auto. the auto value allows the browser to automatically determine the margins. here, we set the left and right margins of the current p to auto, and the browser will set the left and right margins of p. the distance is set to be equal and presented in a centered state, thus achieving the mid-game effect.
note: this method of centering is not supported by browsers below ie6. the css hack section below will explain the solution in detail.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
the operation steps are the same as a column with a fixed width, except that in the css border setting item, set the top, right, bottom, and left of the border to 0, auto, 0, auto respectively. that’s it.
the above is the content of css web page layout introductory tutorial 3: one column with fixed width centered_basic tutorial. for more related content, please pay attention to the php chinese website (www. php.cn)!
Related articles
See more- How Can I Animate Elements Only When They Enter the Viewport on Page Scroll?
- How Can I Display Vertical Text in Table Headers with Auto Height?
- How Can I Horizontally Align Two Divs Without Changing the HTML?
- Can HTML Scroll Directly to a Specific Element?
- How Do Numbers in Bootstrap Grid Classes Control Layout?