Vertically Align Divs

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.

have you tired: <div id="content" align="center";>

Balvant Ahir
– Balvant Ahir

2016-06-22 12:41:13 +00:00
Commented Jun 22, 2016 at 12:41 — Balvant Ahir
– Balvant Ahir, Commented Jun 22, 2016 at 12:41
align is not valid attribute in HTML5

Eduard Void
– Eduard Void

2016-06-22 12:42:46 +00:00
Commented Jun 22, 2016 at 12:42 — Eduard Void
– Eduard Void, Commented Jun 22, 2016 at 12:42

webta.st.ic · Accepted Answer · 2016-06-22 12:47:24Z

6

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/

edited Jun 22, 2016 at 12:47

webta.st.ic

5,2698 gold badges56 silver badges105 bronze badges

answered Jun 22, 2016 at 12:43

Lalji Tadhani

14.2k3 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

webta.st.ic Over a year ago

Hi.. the solution is right, but you shouldn't take the same name of id three times... the ID should be unique, so if you want to group some elements and styles, you should take a class. I edited your code. Cheers.

Mohd Abdul Mujib · Accepted Answer · 2016-06-22 12:46:33Z

3

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

edited Jun 22, 2016 at 12:46

answered Jun 22, 2016 at 12:44

Mohd Abdul Mujib

14.2k8 gold badges73 silver badges93 bronze badges

1 Comment

Datacrawler Over a year ago

Sure @Mohd Abdul Mujib. Wrong paste. I had this as a class.

Eduard Void · Accepted Answer · 2016-06-22 12:41:42Z

2

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

answered Jun 22, 2016 at 12:41

Eduard Void

2,7141 gold badge16 silver badges14 bronze badges

1 Comment

Datacrawler Over a year ago

Wrong paste. I had this like that it would not work.

Nhan · Accepted Answer · 2016-06-22 14:01:30Z

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>

webta.st.ic · Accepted Answer · 2016-06-22 12:55:07Z

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.

Collectives™ on Stack Overflow

Vertically Align Divs

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Related