How to set horizontal centering in css? Two ways to set horizontal centering in CSS-CSS Tutorial-php.cn

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>

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.

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.

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!

Related labels：

css center level

source：php.cn

Previous article：How to set the outer spacing of css? How to set css outer spacing (with examples) Next article：CSS adaptive layout: How to implement CSS width adaptation?

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