Home Web Front-end HTML Tutorial CSS style design tips (horizontal centering, vertical centering)_html/css_WEB-ITnose

CSS style design tips (horizontal centering, vertical centering)_html/css_WEB-ITnose

Jun 24, 2016 am 11:47 AM

Horizontal center setting

(If some phrases are unfamiliar, you can quickly browse through the essays I posted "html common tags", "CSS Summary (Part 1, 2, and 2)", and review it again).

☆Horizontal centering setting - inline elements

In actual work, we often encounter scenarios where we need to set horizontal centering. Now let’s summarize how to set horizontal centering of.
If the set element is an inline element such as text or picture, horizontal centering is achieved by setting text-align:center to the parent element. The following code:
html code:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>定宽块状元素水平居中</title> 6 <style> 7 div{ 8     border:1px solid red; 9     margin:20px;10 }11 div.txtCenter{12     text-align:center;13 }14 </style>15 </head>16 <body>17 <div class="txtCenter">我是文本,哈哈,我想要在父容器中水平居中显示。</div>18 </body>19 </html>
Copy after login

The rendering is as follows:

☆ Horizontal centering setting - fixed-width block element

When the element to be set is a block element, text-align: center will not work. There are two situations: fixed-width block Shape elements and block elements of variable width. Let’s take a look at fixed-width block elements first.
Elements that meet the two conditions of fixed width and block can be centered by setting the "left and right margin" value to "auto". Let's look at an example of setting the div block element to be horizontally centered:
html code:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>定宽块状元素水平居中</title> 6 <style> 7 div{ 8     border:1px solid red; 9     width:500px;10     margin:20px auto;11 }12 </style>13 </head>14 <body>15 <div>我是定宽块状元素,哈哈,我要水平居中显示。</div>16 </body>17 </html>
Copy after login


Note: the " The upper and lower margins can be set at will.

The rendering is as follows:

☆Horizontal centering setting - variable width block element method (1)

In practice At work, we will encounter the need to set the center for "block elements with variable widths", such as pagination navigation on a web page. Because the number of paginations is uncertain, we cannot limit its flexibility by setting the width.
There are three methods for centering block elements with variable widths (these three methods are currently used more often):
1. Add the table tag
2. Set the display; inline method
3. Set position:relative and left:50%;
Let’s look at the first method first:
Step 1: Add a table tag (including , ) outside the centered element that needs to be set. , ).
Step 2: Set the "left and right margins to be centered" for this table (this is the same method as the fixed-width block element).
For example:
html code:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>不定宽块状元素水平居中</title> 6 <style> 7 table{ 8     margin:0 auto; 9 }10 ul{list-style:none;margin:0;padding:0;}11 li{float:left;display:inline;margin-right:8px;}12 </style>13 </head>14 <body>15 <div>16 <table>17   <tbody>18     <tr><td>19     <ul>20         <li><a href="#">1</a></li>21         <li><a href="#">2</a></li>22         <li><a href="#">3</a></li>23     </ul>24     </td></tr>25   </tbody>26 </table>27 </div>28 </body>29 </html>
Copy after login

The rendering is as follows:

☆Horizontal centering setting - variable width block element method (2)

The second method: change the display of the block-level element to inline type, and then use text-align:center to achieve centering Effect. The following example:
html code:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>不定宽块状元素水平居中</title> 6 <style> 7 .container{text-align:center;} 8 .container ul{list-style:none;margin:0;padding:0;display:inline;} 9 .container li{margin-right:8px;display:inline;}10 </style>11 </head>12 13 <body>14 <div class="container">15     <ul>16         <li><a href="#">1</a></li>17         <li><a href="#">2</a></li>18         <li><a href="#">3</a></li>19     </ul>20 </div>21 </body>22 </html>
Copy after login

The advantage of this method compared to the first method is that there is no need to add unsemantic tags, which simplifies the nesting depth of tags. But there are also some problems: it changes the display type of the block element to inline, turning it into an inline element, so it loses some functions, such as setting the length value. (The effect picture is as shown in the method one)

☆Horizontal centering setting - variable width block element method (3)

Method three: By setting float to the parent element, Then set position:relative and left:50% for the parent element, and set position:relative and left:-50% for the child element to achieve horizontal centering.
html code:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>不定宽块状元素水平居中</title> 6 <style> 7 .container{ 8     float:left; 9     position:relative;10     left:50%11 }12 .container ul{13     list-style:none;14     margin:0;15     padding:0;16     17     position:relative;18     left:-50%;19 }20 .container li{float:left;display:inline;margin-right:8px;}21 </style>22 </head>23 24 <body>25 <div class="container">26     <ul>27         <li><a href="#">1</a></li>28         <li><a href="#">2</a></li>29         <li><a href="#">3</a></li>30     </ul>31 </div>32 </body>33 </html>
Copy after login

This method can retain block elements and still display them in the form of display:block. The advantage is that no silent discussion tags are added and no nesting is added. Depth, but its disadvantage is that position:relative is set, which brings certain side effects. These three methods are widely used and each has its own advantages and disadvantages. Which method to choose depends on the specific situation. (The effect picture is as shown in the method one)

Vertical centering setting

☆Vertical centering - a single line of text with a determined height of the parent element

The method of vertically centering a single line of text whose height is determined by the parent element is achieved by setting the height and line-height of the parent element to be consistent. The following code:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>垂直居中</title> 6 <style> 7 .wrap h2{ 8     margin:0; 9     height:100px;10    line-height:100px;11     background:#ccc;12 }13 </style>14 </head>15 <body>16 <div class="wrap">17     <h2>hello,world!</h2>18 </div>19 </body>20 </html>
Copy after login

Rendering:

☆Vertical Centering - Multi-line text with a certain height of the parent element (Method 1)

There are two ways to vertically center multi-line text, pictures, and block elements with a certain height of the parent element:
Method 1: Use insert table (including tbody, tr, td) tags, and set vertical-align: middle.
Speaking of vertical centering, there is an attribute vertical-align in CSS for vertical centering, but this style will only take effect when the parent element is td or th. So we have to insert the table tag again. Let’s take a look at an example:
html code:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta  charset="utf-8"> 5 <title>父元素高度确定的多行文本</title> 6 <style> 7   .wrap{height:300px;background:#ccc} 8 </style> 9 </head>10 <body>11 <table><tbody><tr><td class="wrap">12 <div>13     <p>看我是否可以居中。</p>14     <p>看我是否可以居中。</p>15     <p>看我是否可以居中。</p>16     <p>看我是否可以居中。</p>17     <p>看我是否可以居中。</p>18 </div>19 </td></tr></tbody></table>20 </body>21 </html>
Copy after login

注:因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。

效果图如下:

☆垂直居中-父元素高度确定的多行文本(方法二)

  在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell,激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式。
html代码:

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta  charset="utf-8"> 5 <title>父元素高度确定的多行文本</title> 6 <style> 7 .container{ 8     height:300px; 9     background:#ccc;10     display:table-cell;/*IE8以上及Chrome、Firefox*/11     vertical-align:middle;/*IE8以上及Chrome、Firefox*/12 }13 </style>14 </head>15 16 <body>17 <div class="container">18     <div>19         <p>看我是否可以居中。</p>20         <p>看我是否可以居中。</p>21         <p>看我是否可以居中。</p>22         <p>看我是否可以居中。</p>23         <p>看我是否可以居中。</p>24     </div>25 </div>26 </body>27 </html>
Copy after login

  这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。(效果图如方法一图)

隐形改变display类型

☆隐形改变display类型

  有一个有趣的现象就是当为元素(不论之前是什么类型元素,display:none 除外)设置以下 两句之一:
  position : absolute
  float : left 或 float:right
  元素会自动变为以 display:inline-block 的方式显示,当然也可以设置元素的 width 和 height 了且默认宽度不占满父元素。
如下面的代码,小伙伴们都知道 a 标签是行内元素,所以设置它的 width 是 没有效果的,但是设置为 position:absolute 以后,就可以了。

 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta  charset="utf-8"> 5 <title>隐性改变display类型</title> 6 <style> 7 .container a{ 8     position:absolute; 9     width:200px;10     background:#ccc;11     12 }13 </style>14 </head>15 <body>16 <div class="container">17     <a href="#" title="">查看效果</a>18 </div>19 </body>20 </html>
Copy after login

 

效果图如下:

 

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1666
14
PHP Tutorial
1273
29
C# Tutorial
1253
24
HTML: The Structure, CSS: The Style, JavaScript: The Behavior HTML: The Structure, CSS: The Style, JavaScript: The Behavior Apr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML, CSS, and JavaScript: Web Development Trends The Future of HTML, CSS, and JavaScript: Web Development Trends Apr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

The Future of HTML: Evolution and Trends in Web Design The Future of HTML: Evolution and Trends in Web Design Apr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative Overview HTML vs. CSS vs. JavaScript: A Comparative Overview Apr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Building the Structure of Web Pages HTML: Building the Structure of Web Pages Apr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

HTML vs. CSS and JavaScript: Comparing Web Technologies HTML vs. CSS and JavaScript: Comparing Web Technologies Apr 23, 2025 am 12:05 AM

HTML, CSS and JavaScript are the core technologies for building modern web pages: 1. HTML defines the web page structure, 2. CSS is responsible for the appearance of the web page, 3. JavaScript provides web page dynamics and interactivity, and they work together to create a website with a good user experience.

HTML: Is It a Programming Language or Something Else? HTML: Is It a Programming Language or Something Else? Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

From Text to Websites: The Power of HTML From Text to Websites: The Power of HTML Apr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

See all articles