Element is centered by using margin property

This element is centered by margin property

text-align:center

This element and text align is center

text-align:right

This element align is horizontally center and text align is right

align:vertically center

This text is aligned vertically center by using the padding property

align:vertically and horizontally center

This text is aligned vertically and horizontally center

align:left by using property position

This text is aligned vertically and horizontally center

align:center by using flex model

This text is aligned vertically and horizontally center

following div elements is aligned by position property

This div element have aligned with position relative
This div element is aligned by using position absolute

This image is align center by using display and margin property

fgd

img align:left by using float

This image is aligned left by using the float property

img align:right by using float

This image is aligned right by using the float property

align:center by using line-height property value equal to height property value

This text is aligned center by using the line-height property

align:center by using position and transform properties

This text is aligned center by using position and transform property

combinator selector:desendent selector

d-selector represent the decendent selector.

desendent selector of div element

this is desendent but not a child elememt of the div

combinator selector:child selector

c-selector represent the child selector

this is direct child element of div element

this p element is desecendent what not child element of div

this one also child element of div element

combinator selector: adjacent sibling selector

this p element is child of div

this is adjacent sibling element of div

this element have no change because it is not adjacent sibling element

combinator selector: general sibling selector

g-sibling represent the general sibling element

this is direct child element of div

general sibling elemnt of div

this is a paragraph

this is general sibling element

align-content: flex-start

1
2
3
4
5
6
7
8
9

align-content:flex-end

1
2
3
4
5
6
7
8
9

align-content:center

1
2
3
4
5
6
7
8
9

align-content:space-around

1
2
3
4
5
6
7
8
9

align-content:space-between

1
2
3
4
5
6
7
8
9

align-content:space-evenly

1
2
3
4
5
6
7
8
9

align-content:stretch

1
2
3
4
5
6
7
8
9

flex-grow

1
2
3
4
5
6
7
8
9

flex-basis

1
2
3
4
5
6
7
8
9