CSS style settings
1. Horizontal centering setting
Inline element centering setting: 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 code example is as follows:
HTML代码
<body>
<div class="txtCenter">我想要在父容器中水平居中显示。</div>
</body>
CSS代码
<style>
.txtCenter{
text-align:center;
}
</style>Centering setting of fixed-width block elements: Elements that meet the two conditions of fixed width and block can be centered by setting the "left and right margin" value to "auto". The code example is as follows:
HTML代码
<body>
<div>我是定宽块状元素，哈哈，我要水平居中显示。</div>
</body>
CSS代码
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>Center setting of variable-width block elements:
Adding the table tag takes advantage of the length adaptability of the table tag---that is, it does not define its length and does not default to the length of the parent element body ( The length of the table is determined by the length of the text within it), so it can be regarded as a fixed-width block element, and then the fixed-width block-centered margin method is used to center it horizontally. The code example is as follows:
HTML代码
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
CSS代码
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>2. Set the display: inline method: change the display of the block-level element to the inline type (set to display inline elements), and then use text-align:center to achieve the centering effect. The code is as follows:
HTML代码
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
CSS代码
<style>
.container{
text-align:center;
}
/* margin:0;padding:0（消除文本与div边框之间的间隙）*/
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
/* margin-right:8px（设置li文本之间的间隔）*/
.container li{
margin-right:8px;
display:inline;
}
</style>3. Set position:relative and left:50%: Set float for 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. The code is as follows:
HTML代码
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>
CSS代码
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>2. Vertical centering setting
A single line of text whose height is determined by the parent element:
The method of vertically centering a single line of text whose height is determined by the parent element is to set the height and line-height of the parent element to be consistent. realized. (height: the height of the element, line-height: as the name implies, line height (line spacing) refers to the distance between the baselines between lines in text). The code is as follows:
HTML代码
<div class="container">
hello, world!
</div>
CSS代码
<style>
.container{
height:100px;
line-height:100px;
background:#999;
}
</style>Multi-line text with a certain height of the parent element:
1. Use the insert table (including tbody, tr, td) tag, and set vertical-align: middle. There is an attribute in CSS for vertical centering called vertical-align. When the parent element sets this style, it will be useful for all inline-block type child elements. The code is as follows:
HTML代码
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
CSS代码
table td{height:500px;background:#ccc}
/*因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。*/2. In browsers such as chrome, firefox and IE8 or above, you can set the display of block-level elements to table-cell (set to table cell display) and activate the vertical-align attribute, but please note that IE6 and 7 This style is not supported and has poor compatibility. The code is as follows:
HTML代码
<div class="container">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</div>
CSS代码
<style>
.container{
height:300px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>The advantage of this method is that there is no need to add extra meaningless tags, but the disadvantages are also obvious. Its compatibility is not very good, and it is not compatible with IE6 and 7. Moreover, the display block is modified into a table in this way. -cell, destroys the nature of the original block elements.
3. Implicitly change the display type
When setting one of the following 2 sentences for an element (regardless of the previous type of element, except display:none):
1. position : absolute
2. float : left or float:right
, the display display type of the element will automatically change to display:inline-block (block element). Of course, you can set the width and height of the element, and the default width does not occupy the parent element. The code is as follows:
HTML代码
<div class="container">
<a href="#" title="">进入课程请单击这里</a>
</div>
CSS代码
<style>
.container a{
position:absolute;
width:200px;
background:#ccc;
}
</style>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1379
52
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
How to view the date of bootstrap
Apr 07, 2025 pm 03:03 PM
Answer: You can use the date picker component of Bootstrap to view dates in the page. Steps: Introduce the Bootstrap framework. Create a date selector input box in HTML. Bootstrap will automatically add styles to the selector. Use JavaScript to get the selected date.
