CSS tutorial

Aligning html elements

.outer {
  position:relative;
  width: 200px;
  height: 200px;
  border: 4px solid red;
  display:table-cell;
  vertical-align: middle;
  margin: -15% 0 0 -15%
}

.inner {
  width: 100px;
  height: 100px;
  line-height: 100px;
  border: 4px solid green;
  text-align: center;
  margin: auto;
}

.inner p{
  line-height: 1rem;
  vertical-align: middle;
 display: inline-block;
}
<div class="outer">
  <div class="inner"><p>txt<br>1</p></div>
</div>

txt
1

There are some ways for aligning like properties text-align and vertical-align, features provided by flex model or floating elements.

horizontal alignment

Don't forget that by default the width of a block element matches to the width of the parent element.

Block elements can be aligning using horizontal margins with auto value.

Floating elements can be aligned left or right. In addition, text or inline elements will flow around them.

A modern way for aligning is using flex model. It can be apply for block elements and inline elements.

A text or inline elements can be aligned by text-align property, possible values are:

  • left - aligns the text to the left
  • right - aligns the text to the right
  • center - centers the text
  • justify - text is justified by width
<div style="width: 20px; height: 20px; 
border: 2px solid red;"> </div>

<div style="width: 20px; height: 20px; 
margin: auto;
border: 2px solid green;"> </div>

<div style="width: 20px; height: 20px; 
margin-left: auto; margin-right: 0;
border: 2px solid blue;"> </div>

<div style="float: left; width: 20px; height: 20px; 
border: 2px solid green;" ></div>
<div style="float: right; width: 20px; height: 20px; 
border: 2px solid blue;" ></div>
txt
txt 
<div style="display: flex; justify-content: flex-end;
width: 100px; height: 40px;
border: 2px solid black;">
  <div style="width: 20px; height: 20px; 
border: 2px solid green;"></div>
</div>

<div style="display: flex; justify-content: space-around;
width: 100px; height: 40px;
border: 2px solid black;">
  <div style="width: 20px; height: 20px; 
     border: 2px solid green;"></div>
  <div style="width: 20px; height: 20px; 
     border: 2px solid green;"></div>
  <div style="width: 20px; height: 20px; 
     border: 2px solid green;"></div>
</div>

vertical alignment

The vertical-align property sets the vertical alignment of an element. It can take following value:

value description
baseline Aligns elements to the baseline of the parent.
sub Aligns elements to the subscript baseline of the parent.
super Aligns elements to the superscript baseline of the parent.
top Aligns to the top of the tallest element on the line.
text-top Aligns to the top of the parent element's font.
middle Aligns the middle of the element with the baseline plus half the x-height of the parent.
bottom Aligns elements to the lowest element on the line.
text-bottom Aligns to the top of the parent element's font.
value Aligns the baseline of the element to the given length above the baseline of its parent. A negative value is allowed.
%value Aligns the baseline of the element to the given percentage above the baseline of its parent, with the value being a percentage of the line-height property. A negative value is allowed. 
<div style="width:100px; height:100px;
border: 2px solid black;
text-align: center;
display: table-cell;
vertical-align: middle;"> txt</div>
txt
 
<div style="width:100px; height:100px;
border: 2px solid black;
text-align: center;
line-height:100px;"> 

<p style="vertical-align: middle; 
    display: inline-block;
    line-height:1rem;">
      txt txt txt txt txt txt
</p></div>

txt txt txt txt txt txt

 
<div 
style="display: flex;  justify-content: space-around;
width: 100px; height: 40px;
border: 2px solid black;">
  <div style="width: 20px; height: 20px; 
      align-self: start;
      border: 2px solid green;"></div>
  <div style="width: 20px;  
      align-self: stretch;
      border: 2px solid green;"></div>
  <div style="width: 20px; height: 20px; 
     align-self: center;
     border: 2px solid green;"></div>
  <div style="width: 20px; height: 20px; 
     align-self: flex-end;
     border: 2px solid green;"></div>
</div>