How to set horizontal centering in css? Two ways to set horizontal centering in CSS

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 elementsIn 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>

Detailed explanation:

1. 2e1cf0710519d5598b1f0f14c36ba674Text2e1cf0710519d5598b1f0f14c36ba674It 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. e388a4556c0f65e1904146cc1a846beeTexte388a4556c0f65e1904146cc1a846beeAt 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.dc6dce4a544fdca2df29d5ac0ea9906b2e1cf0710519d5598b1f0f14c36ba674Text2e1cf0710519d5598b1f0f14c36ba674dc6dce4a544fdca2df29d5ac0ea9906b, 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>

css variable width block Level elements are horizontally centered: block-level elements with variable widths

For example:

1. Add block-level elements to the f5d188ed2c074f8b944552db028f98a1 tag.

<table style="margin: 0 auto">
    <tbody>
        <tr><td>
                <div>设置table实现水平居中</div>
    </td></tr>
    </tbody></table>

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>

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>

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!