How to center elements inside a div?
This question already has an answer here:
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.
Here is the jsfiddle demo
You can see those 5 circles are the ones I need to center them inside the main div ground.
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:
See this answer for a few alternatives.