Page element center methods and element center Methods

Last Update:2014-09-06 Source: Internet

Author: User

Tags set background

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Page element center methods and element center Methods
1 Preface

During page layout, some page elements are usually displayed in the center. Of course, you can set the top and left of the element to center it. However, when the size of the parent container changes, you have to modify the top and left of the child element to keep it centered; when the resolution of a user's display is different from that of your test machine, the interface may be messy. Therefore, no matter in terms of code maintainability or adaptability to different resolution monitors, this method of setting the fixed value is obviously poor. Therefore, we recommend that you minimize the use of fixed value la s for page la S. The following describes how to Center page elements.

Center 1 Div 1.1 center left and right

Set text-align: center in the parent window. Note that this method only applies to inline elements. Therefore, set display: inline-block in the center div. The red line section in the following code shows how to center the three divs in itemContainer.

If a single element is centered, you can also use margin: 0 auto, but this method cannot center multiple elements in the parent window.

1.2 center up and down

The text-align attribute can only be set to center in the left-right corner. top: 50%; margin-top:-40px can be used to center up and down. Top: 50% sets the top of the div to 50% of the parent container height, but the div itself has a height. margin-top:-40px indicates moving up half of the div's own height. Note that overflow: auto should be set for the parent container. Otherwise, the above settings will affect the size of the parent container.

If you want to center both top, bottom, and left, use the method shown in 2.1.

The red line section in the following code shows how to center itemContainer in the entire page.

2 Text Center

Method 1: place the text in the div label, and set the center according to the div center method.

Method 2: Left-right center text-align: center. You can set line-height to the height of the parent container in the text parent container, as shown in the following code.

3. Center the background image

Set background: 50% 50%. You can adjust the two parameters to use only the Upper and Lower center (background: 0% 50%) and only the left and right center (background: 50% 0% ).

4. Test Cases

<% @ Page contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %>

<! DOCTYPEhtml PUBLIC "-// W3C // dtd html 4.01 Transitional //" http://www.w3.org/TR/html4/loose.dtd ">

<Head>

. Item {background: url ("pic.png") no-repeat 50% 50%; position: relative; display: inline-block; width: 80px; height: 80px; outline: solid2px #000000; line-height: 80px}

</Style>

</Head>

<Div id = "itemContainer"

Style = "position: relative; width: 400px; height: 80px; outline: solid 2px # ff0000; text-align: center; top: 50%; margin: 0 auto; margin-top:-40px ">

Test

</Div>

Test

</Div>

Test

</Div>

</Body>

</Html>

How can I center a word Table?

1. "file-page settings-select-layout-center" means to center all content (as if you have only a table in the example below) on the entire page, that is, the top and bottom margins are the same.
2. "place the cursor in the upper left corner of the table, click" select entire table ", right-click the table, and select" Table properties ">" table ">" center ". The entire table is placed in the left-right corner of the page.
3. "place the cursor in the upper left corner of the table, click" select entire table ", right-click the table, and select" Table attribute ">" cell ">" center "to center up and down the words in each cell.

How to center a webpage

You must add a DTD.
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "www.w3.org/..al.dtd">

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More