Webpage element center strategy _ (1) element horizontal center, center strategy

Webpage element center strategy _ (1) element horizontal center, center strategy
Horizontal Center Scheme of In-row Elements

• The row element is enclosed in a parent layer element whose display is block.text-align:centerYou can achieve

Code Implementation

Index.html

<! DOCTYPE html> 

A horizontal center solution for block elements

Set the margin of a block to auto on the left and right. You can set the upper and lower margin as needed.{margin:0 auto}

Code Implementation

Index.html

<! DOCTYPE html> 

Horizontal center of multiple block elements

• Refer to the first implementation. Set internal DIV to inline block and package block.text-align:center

Code Implementation

Index.html

<! DOCTYPE html>