css style can achieve horizontal centering, so how to set css horizontal centering? This article will share with you the implementation method of css setting horizontal centering .
In css, you can set the horizontal centering of inline elements and the horizontal centering of block-level elements. Students who don’t understand inline elements and block-level elements can refer to What is the definition of block-level elements in css? What are the css block-level elements? What are the and css inline elements? The difference between css block-level elements and inline elements In these two articles, let’s look directly at the two horizontal centering settings in css.
First, let’s take a look at css to set the horizontal centering of inline elements.
The first type: CSS inline elements are horizontally centered:
Syntax: div{text-align:center} /*Inline elements within DIV will be horizontally centered* /
Simple explanation: Set the text-align:center style for the parent element.
<div style="text-align: center">
<span>行内元素水平居中</span>
</div> Copy after login
Detailed explanation:
1. TextIt is meaningless to center the two words "Text" horizontally relative to the label here. The label is The width of an inline element is equal to the width of the content, which means that the word "text" is always horizontally centered.
2.
Text
At this time, it makes sense to center the two words "Text" horizontally, because p is a block-level element, its width occupies one line, and text It only occupies a width of two characters. At this time, set text-align:center for the p element; then the two words "text" will be horizontally centered in one line.
3.
Text, how to center the label element horizontally relative to the div.
After reading the horizontal centering of css inline elements, let’s talk about the horizontal centering of css block-level elements . The horizontal centering of css block-level elements is divided into the horizontal centering of fixed-width block-level elements. and variable-width block-level elements are horizontally centered. Let’s look at them separately below.
The second type: CSS fixed-width block-level elements are horizontally centered: they are both block-level elements and fixed-width elements.
Set the left and right margin values of the block-level elements that need to be horizontally centered to auto;
For example:
<div>
<div style="width: 100px;height: 100px;background-color: green;margin: 0 auto">
</div></div> Copy after login
css variable width block Level elements are horizontally centered: block-level elements with variable widths
For example:
1. Add block-level elements to the
tag. <table style="margin: 0 auto">
<tbody>
<tr><td>
<div>设置table实现水平居中</div>
</td></tr>
</tbody></table> Copy after login
2. Set the block-level element style display:inline, and then add the text-align:center style to the parent element.
<div style="text-align: center">
<div style="display: inline">
设置inline实现水平居中
</div></div> Copy after login
3. Add a parent element to the block-level element, and set the parent element style to style="float:left;position:relative;left:50%"; set the block-level element style For style="float:left;position:relative;left:-50%"
<div style="float:left;position:relative;left: 50%">
<div style="position: relative;left: -50%">
设置relative实现水平居中
</div>
</div> Copy after login
Related recommendations:
CSS horizontal center summary
CSS vertical centering and horizontal centering_html/css_WEB-ITnose
The above is the detailed content of How to set horizontal centering in css? Two ways to set horizontal centering in CSS. For more information, please follow other related articles on the PHP Chinese website!
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
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 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 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 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.
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 verify bootstrap date
Apr 07, 2025 pm 03:06 PM
To verify dates in Bootstrap, follow these steps: Introduce the required scripts and styles; initialize the date selector component; set the data-bv-date attribute to enable verification; configure verification rules (such as date formats, error messages, etc.); integrate the Bootstrap verification framework and automatically verify date input when form is submitted.
How to set the bootstrap navigation bar
Apr 07, 2025 pm 01:51 PM
Bootstrap provides a simple guide to setting up navigation bars: Introducing the Bootstrap library to create navigation bar containers Add brand identity Create navigation links Add other elements (optional) Adjust styles (optional)
See all articles
Web Front-end
