Positioning of elements




Vertical positioning

In all these examples, the vertical positioning will operate with only one indoor unit. If you have multiple units, you need to wrap in one.

 

Using absolute positioning

Feature: you Must know the height of the inner block. But this is not always possible.

  1. #outer-1 {
  2. position: relative;
  3. height: 300px;
  4. width: 300px;
  5. background-color: gray;
  6. }
  7. #inner-1 {
  8. position: absolute;
  9. height: 100px;
  10. width: 100px;
  11. top: 50%;
  12. margin-top: -50px;
  13. background-color: pink;
  14. }

 

By specifying the row height

Feature: you Must know the height of veshengo block and set the row height such as the height of the block. But this is not always possible.

  1. #outer-2 {
  2. height: 300px;
  3. width: 300px;
  4. background-color: gray;
  5. line-height: 300px;
  6. vertical-align: middle;
  7. }
  8. #inner-2 {
  9. display: inline-block;
  10. background-color: pink;
  11. line-height: 20px;
  12. }

 

With the help of a table cell (IE8 )

Feature: the behavior of the external unit will be like achike tables in particular will be ignored margin. This can be seen in the Demo.

  1. #outer-3 {
  2. display: table-cell;
  3. height: 300px;
  4. width: 300px;
  5. background-color: gray;
  6. vertical-align: middle;
  7. }
  8. #inner-3 {
  9. display: inline;
  10. background-color: pink;
  11. }

 

Using the pseudo-selector :before on the outdoor unit

Feature: To avoid padding (4px) between the block created by the pseudo-element :before and want to block position, you must have an external unit to set the height of font 0, and the internal to get her back.

  1. #outer-4 {
  2. height: 300px;
  3. width: 300px;
  4. background-color: gray;
  5. font-size: 0;
  6. }
  7. #outer-4:before {
  8. content: "";
  9. display: inline-block;
  10. height: 100%;
  11. vertical-align: middle;
  12. }
  13. #inner-4 {
  14. display: inline-block;
  15. vertical-align: middle;
  16. background-color: pink;
  17. font-size: 14px;
  18. }

 

Horizontal positioning

Positioning in the horizontal plane works on multiple items if they are inline or inline-block.

To check examples with horizontal and distributed positioning, adjust the width of the browser window.

 

The positioning element inline

Feature: Elements inline ignore you specify the width, height, external padding.

  1. #outer-5 {
  2. height: 300px;
  3. text-align: center;
  4. background-color: gray;
  5. }
  6. #inner-5 {
  7. display: inline;
  8. height: 100px;
  9. width: 100px;
  10. background-color: pink;
  11. }

 

The positioning of the element to inline-block

  1. #outer-6 {
  2. height: 300px;
  3. text-align: center;
  4. background-color: gray;
  5. }
  6. #inner-6 {
  7. display: inline-block;
  8. height: 100px;
  9. width: 100px;
  10. background-color: pink;
  11. }

 

The positioning element block

  1. #outer-7 {
  2. height: 300px;
  3. background-color: gray;
  4. }
  5. #inner-7 {
  6. height: 100px;
  7. width: 100px;
  8. margin: 0 auto;
  9. background-color: pink;
  10. }

 

The positioning element block with the CSS rule "position: absolute; or position: fixed;

  1. #outer-8 {
  2. position: relative;
  3. height: 300px;
  4. background-color: gray;
  5. }
  6. #inner-8 {
  7. position: absolute;
  8. height: 100px;
  9. max-width: 500px;
  10. top: 20px;
  11. left: 20px;
  12. right: 20px;
  13. margin: 0 auto;
  14. background-color: pink;
  15. }

 

Distributed positioning across the width

Elements inline normally positioned using the CSS rule text-align: justify;, however, the features appear when it is necessary to position the elements are inline-block.

  1. .content-justify {
  2. text-align: justify;
  3. }
  4. .content-justify:after {
  5. content: "";
  6. display: inline-block;
  7. height: 0;
  8. width: 100%;
  9. visibility: hidden;
  10. overflow: hidden;
  11. }
  12. .content-justify > * {
  13. display: inline-block;
  14. }

Live demo
Download ZIP







Found comments - 0






Current text is converted to a smiley
:) :( :0 :@ :# :$ :? :] :[ :} :{ :k :p :x :| :Q :O :S :D :X :C :-) :-( :-0 :-# :-$ :-? :-] :-[ :-} :-{ :-o :-p :-x :-| :-Q :-O :-S :-D :-X :-C :-* :-r :-t :-i :-s :-j :-k :-l :-z :-\ :-/ :-I :-J :-K :-L :-Z ;) ;] ;} ;-) ;-] ;-} =) =( =0 =@ =# =$ =? =] =[ =} ={ =o =p =x =| =Q =O =S =D =X =C
:)

Designer avatar

Gender
Hairs/Hats Mouth
Eyes Glasses
Result