Tips for beginners: How to align text & content with html & css

Quick Example: How to align text & content in CSS

In this post we show how to vertically align your text even if the text is changing its font size dynmically and also how to

align horizontally content (aka divs – otherwise you can do it with span tags) using the old fashioned floats. At the end you can find 

the code in jsFiddle for further practice.

.container {
  width: 200px;
  height: 100px;
  position: relative;
}
.name-container, .age-container {
  float: left;
  width: 100px;
  height: 100px;
  text-align: center;
  vertical-align: middle;
  line-height: 100px;
}
.name-container {
  background-color: green;
}
.age-container {
  background-color: purple;
}

The trick for the vertical alignment of the text is aside from the definition of width & height to define the line-height to be

the same as the height as in the above example which is 100px.

You can experiment in js fiddle https://jsfiddle.net/38nqvmck/

Giannis Kanellopoulos

Biography to be completed

More Posts