Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to center CSS elements and block-level elements". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

one。 Horizontal center

Inline elements are different from block-level elements. For inline elements, you only need to set text-align=center in the parent element

There are several ways to center block-level elements:

1. The element is placed in table, and then the margin-left and margin-right of table are set to auto, and the table is centered, so that the leaves of the block-level elements in it are centered, but this way does not conform to the specification of semantic tags.

two。 Convert block-level elements to inline elements (by setting display:inline) and then center. In this way, the centered element becomes an inline element, so that the width and height cannot be set.

3. Set the parent element float:left,position:relative,left:50%; child element float:left,position:relative,left:-50%, to center using relative layout. The above three methods have their own advantages and disadvantages, according to the specific choice of the use situation.

two。 Vertical center

1. For elements that know the height, you can set the upper and lower padding equality;

two。 Set line-height and height equal

3. Using vertical-align, but this attribute is only applicable in tr,td, so you can place the element in the table to center

Source code

The code is as follows:

Hehe

Oh.

Oh.

Oh.

Oh.

Oh.

Oh.

Oh.

Oh.

Oh.

Nihao

Hello

I travel as soon as I want to go.

One string, one pillar, one year.

Css style

The code is as follows:

.father

{

Width:500px

}

.inlineCenter

{

Text-align:center

Float:left

}

.blockCenter

{

Width:100px

Margin-left:auto

Margin-right:auto

Text-align: "center"

}

.tableclass

{

Margin-left:auto

Margin-right:auto

}

.ulclass

{

List-style:none

Margin:0

Padding:0

}

.ulclass li

{

Float:left

Display:inline

Text-align:center

}

.ulclass li a

{

Text-align:center

Float:left

Background:#316AC5

Color:#fff

}

.ulclass li a:hover

{

Background:#fff

Color:#316AC5

}

.relativeCenterFather

{

Float:left

Position:relative

Left:50%

}

.relativeCenterChild

{

Float:left

Position:relative

Left:-50%

}

/ * right in the middle * /

.wrap

{

Background:#000

Width:500px

Color:#fff

Height:100px

Line-height:100px

}

This is the end of the content of "how CSS in-line elements and block-level elements are centered". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.