How to center elements inside a div?

Question

I have some divs inside a main div, but I have looked every questions similar to this and I have tried many things but I couldn't center them horizontally. I could only make them on the other side but not the center.

.ground {
  width: 390px;
  height: 575px;
  border: 1px solid white;
}

.line {
  padding: 10px
}

.active {
  width: 30px;
  height: 30px;
  opacity: 0.5;
  background: gray;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 100px;  
  display: inline-block;
  border: 2px solid black;
}

.nonactive {
  width: 30px;
  height: 30px;
  opacity: 1.0;
  background: lime;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 100px;  
  display: inline-block;
  border: 2px solid black;
}

Here is the jsfiddle demo

You can see those 5 circles are the ones I need to center them inside the main div ground.

score 7 · Accepted Answer · edited May 23 '17 at 12:15

7

In your case, the simplest way to do this would be to set the display of the .line element to inline-block so that it has a "shrink-to-fit" width. In doing so, it will have the same width as its children elements. Then add text-align: center to the parent element to center the inline child element:

Updated Example

.ground {
  text-align: center;
}
.ground .line {
  display: inline-block;
}

See this answer for a few alternatives.

edited May 23 '17 at 12:15

Community

1
1

answered Dec 11 '15 at 18:15

Josh Crozier

233,099
56
391
304

Why not adding `text-align: center;` to .line ? I'm just asking a question :) – Saehun Sean Oh Dec 11 '15 at 18:24
@SaehunSeanOh That would definitely work, but I thought it would be better to center the parent in case there was a background/border or something on it. For instance - http://jsfiddle.net/j30h4drb/ vs http://jsfiddle.net/vn409jkn/ Good point though. – Josh Crozier Dec 11 '15 at 18:27
This worked.. and I never came across the other thread you linked while searching for this problem. – skyline33 Dec 11 '15 at 18:28
@JoshCrozier Ah, I only thought of a direct answer than thinking of other situations. Thanks :) – Saehun Sean Oh Dec 11 '15 at 18:36

score 1 · Answer 2 · answered Dec 11 '15 at 18:15

You can make use of flexbox centering. display: flex and justify-content: center on the parent element will center the circles.

JSfiddle Demo

.ground {
  width: 390px;
  height: 575px;
  background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAxgDGAAD/2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwMBwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAAKAAoDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD49bqCD1/CgT7RjA4+lEZ4b2A/lTa/Dj86Z//Z);
  border: 1px solid white;
  display: flex;
  justify-content: center;
}
.line {
  padding: 10px
}
.active {
  width: 30px;
  height: 30px;
  opacity: 0.5;
  background: gray;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 100px;
  display: inline-block;
  border: 2px solid black;
}
.nonactive {
  width: 30px;
  height: 30px;
  opacity: 1.0;
  background: lime;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
  border-radius: 100px;
  display: inline-block;
  border: 2px solid black;
}

<div class="ground">
  <div class="line">
    <div id="def" class="active"></div>
    <div id="def" class="active"></div>
    <div id="def" class="active"></div>
    <div id="def" class="active"></div>
    <div id="def" class="active"></div>
  </div>
</div>

How to center elements inside a div?

2 Answers2