Vertically Align Divs - html

Question

I am trying to vertically align a div in my code but with no success. This div contains sub divs. The first one
I want this to look like this :
but at the moment it is not aligned. This is my HTML code :
body {
display: block;
margin-left: auto;
margin-right: auto;
background: #f1f1f1;
}
.content {
float: left;
margin: 20px auto;
text-align: center;
width: 300px;
}
.content h1 {
text-transform: uppercase;
font-weight: 700;
margin: 0 0 40px 0;
font-size: 25px;
line-height: 30px;
}
.circle {
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
/* the magic */
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
color: white;
font-size: 16px;
text-transform: uppercase;
font-weight: 700;
margin: 0 auto 20px;
}
.blue {
background-color: #052D72;
}
.green {
background-color: #16a085;
}
.red {
background-color: #e74c3c;
}
<div class="content">
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue">Blue</div>
<div class="circle blue"></div>
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
So, in the .content I tried adding this :
vertical-align:baseline;
but I saw no difference.

Answer 1

Add display:inline-block & Remove float for #content
.content {
display: inline-block;
margin: 20px auto;
text-align: center;
vertical-align: middle;
width: 200px;
}
https://jsfiddle.net/k0fx384a/1/
EDIT with class: https://jsfiddle.net/k0fx384a/2/

Answer 2

You have used same #id with multiple elements. That is not allowed in HTML across all browsers(seems like IE and FF allow multiple #ids).
So just change all the occurances of id="content" to class="content" and the CSS should start working.
DEMO

Answer 3

change <div id="content"> to <div class="content"> so the styles will be applied.

Answer 4

If you want them both vertically and horizontally aligned, I would recommend using flex. This offers more flexibility and is more forward-facing.
Mozilla Docs on Flex
If you use the rules align-items and justify-content, you'll get magic workings. Check out an example: https://jsfiddle.net/vrad7yuj/
.container {
display: flex;
flex-direction: row;
height: 100%;
width: 100%;
border: 2px solid #f00;
}
.col {
border: 2px solid #00f;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ball {
border-radius: 50%;
border: 1px solid #0f0;
height: 60px;
width: 60px;
}
<div class="container">
<div class="col">
<div class="ball"></div>
</div>
<div class="col">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
<div class="col">
<div class="ball"></div>
<div class="ball"></div>
</div>
</div>

Answer 5

Alternative, if you want to do this with a little count of codelines, you can use flexbox:
body {
display: flex;
margin-left: auto;
margin-right: auto;
background: #f1f1f1;
}
.content {
display: flex;
flex-direction: column;
margin: 20px auto;
text-align: center;
width: 300px;
}
.content h1 {
text-transform: uppercase;
font-weight: 700;
margin: 0 0 40px 0;
font-size: 25px;
line-height: 30px;
}
.circle {
width: 100px;
height: 100px;
line-height: 100px;
border-radius: 50%;
/* the magic */
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
color: white;
font-size: 16px;
text-transform: uppercase;
font-weight: 700;
margin: 0 auto 20px;
}
.blue {
background-color: #052D72;
}
.green {
background-color: #16a085;
}
.red {
background-color: #e74c3c;
}
<div class="content">
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue">Blue</div>
<div class="circle blue"></div>
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
<div class="content">
<div class="circle blue"></div>
<div class="circle blue"></div>
</div>
Take a look on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Should just be an alternative solution and new knowledge for you. ;-) Cheers.