CSS layout (vi) alignment

First, the horizontal center:

(1). The horizontal center of the inline element?

If the element is set as a text, picture, and other inline elements, set text-align:center in the parent element to Center The inline element horizontally , set the display of the child element to Inline-block, Make child elements into inline elements

 <  div  class  = "parent"   style  = "Background-color:gray;"   >  <  div  class  = "Child"   style  = "background-color:lightblue;"  >  Demo</ div  >  </ div  >  

<style>.parent {text-align: center;}     .Child {display: inline-block;} </style>

(2) Horizontal center of block element (fixed width)

Using Text-align:center is not useful when the element being set is a fixed-width block-level element . You can center by setting the "left margin" value to "auto".

 <  div  class  = "parent"   style  = "Background-color:gray;"   >  <  div  class  = "Child"   style  = "background-color:lightblue;"  >  Demo</ div  >  </ div  >  

        .Child {            width: 200px;             Margin: 0 auto;        }

(3) Horizontal center of The block Element (indeterminate width)

In actual work we will encounter the need to set the "block-level element of the indefinite width" centering, such as page navigation on a webpage, because the number of paging is indeterminate, so we can not set the width to limit its elasticity.

You can set text-align:center for a block-level element that is not wide, or you can add text-align:center to the parent element to achieve a center effect.

You can set display to inline or inline-block (set to inline element display or inline block element) when the width of an indeterminate block-level element does not occupy a single line

<Divclass= "Container">    <ul>        <Li><ahref="#">1</a></Li>        <Li><ahref="#">2</a></Li>        <Li><ahref="#">3</a></Li>    </ul></Div>

. Container {text-align:Center; background: Beige}. Container ul{List-style:none;  Margin:0; padding:0; display:inline-block;} . Container Li {margin-right:8px; display:inline-block;}

Two, vertical center:

and horizontal center, here to speak Vertical center, first set two conditions that the parent element is a box container and height has been set

Scenario 1: The child element is an inline element, and the height is stretched by its contents

In this case, you need to set the parent element's line-height to its height so that the child elements are centered vertically

<class= "Wrap line-height">    <   Class= "span">111111</span></  div>

. Wrap {            width:;             height: 300px;             line-height: 300px;             Border: 2px solid #ccc;        } . Span {            background: red;        }       

Scenario 2: The child element is a block-level element, but the height of the child element is not set, in this case it is actually not known the height of the child element, can not be calculated by padding or margin to adjust, but there are some solutions.

Resolve by setting Display:table-cell;vertical-align:middle for the parent element

 <  div  class  = "wrap"     >  <  div  class  = "Non-height"  >  11111</ div  >  </ div  >  

. Wrap {       width:;        height: 300px;        Border: 2px solid #ccc; display: Table-cell; vertical-align: Middle;} . Non-height {       background: green;        }

Results

Scenario 3: Child elements are block-level elements and height has been set

Calculates the margin-top or margin-bottom of a child element, calculated as the parent (element height-sub-element height)/2

 <  div  class  = "wrap"     >  <  div  class  = "Div1"  >  111111</ div  >  </ div  >  

  . Wrap{            width:;             Height: 300px;             Border: 2px solid #ccc;        } . Div1 {            width:;             height: 100px;             margin-top: 100px;             background: darkblue;        }    

Results

Three, horizontal vertical center:

3.1 Horizontal alignment + row height

Text-align + line-height for horizontal vertical centering of single-line text

<style>.test {    text-align: Center;     line-height: 100px;} </style>

<class= "test"  style= "Background-color:lightblue;width: 200px; " > Test text </div>  

3.2 Horizontal + Vertical Alignment

1. Text-align + vertical-align set Text-align and vertical-align in parent element, and set parent element to Table-cell element, child element set to Inline-block element

<style>.parent {    display: Table-cell;     text-align: Center;     vertical-align: Middle;} . Child {    display: inline-block;} </style>

<class= "parent"  style= "background-color:gray; width:200px; height : 100px; " >  <  class= "Child"  style= "background-color:lightblue;" > Test text </div></div>

2. If the child element is an image, instead of using Table-cell, the parent element uses the row height instead of the height, and the font size is set to 0. The child element itself is set Vertical-align:middle

 <  div  class  = "parent"   style  = "Background-color:gray; width:200px; " >  <  img  class  = "Child"   src  = "http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif"   width  =" 50% "  alt " Span style= "COLOR: #0000ff" >= "test"  >   </ div  >  

<style>.parent {    text-align: Center;     line-height: 100px;     font-size: 0;} . Child {    vertical-align: Middle;} </style>

3.3 Relative + absolute positioning

Using absolute, the box model property of an absolutely positioned element is used, and the offset attribute is set based on the determined value, and the Margin:auto

 <style>.parent  { position : Span style= "COLOR: #0000ff" > relative ;} .child  { position :  absolute ;  top :  0 ;  left :  0 ;  right :  0 ;  bottom :  0 ;  height :  50px ;  width :  80px ;  margin :  auto ;} </STYLE>  

<class= "parent"  style= "background-color:lightgray; width:200px; height:100px; >  <class= "Child"  style= " Background-color:lightblue; " > Test text </div></div>

CSS layout (vi) alignment