Center divs in div

Question

I have the following HTML code

.ratings { border: 1px solid #CCC; overflow: visible; padding: 10px; position: relative; width: 100%; height: 100px; } .ratings_stars { background: url('/images/rsz_star_icon_1.png') no-repeat; float: left; height: 28px; padding: 2px; width: 32px; } .ratings_vote { background: url('star_voted.png') no-repeat; } .ratings_over { background: url('star_overs.png') no-repeat; } .total_votes { background: #eaeaea; top: 58px; left: 0; padding: 5px; position: absolute; } 

 <div class="row"> <div class="col-xs-12"> <div id="rating_1" class="ratings"> <div class="star_1 ratings_stars"></div> <div class="star_2 ratings_stars"></div> <div class="star_3 ratings_stars"></div> <div class="star_4 ratings_stars"></div> <div class="star_5 ratings_stars"></div> <div class="star_6 ratings_stars"></div> <div class="star_7 ratings_stars"></div> <div class="star_8 ratings_stars"></div> <div class="star_9 ratings_stars"></div> <div class="star_10 ratings_stars"></div> <div class="total_votes">vote data</div> </div> </div> </div> 

I want to make the images from divs responsive .. and I want all the stars to be often centered inside. How can i do this? have equal margins and keep centered star icons

Answer 1

Use display:flex; and justify-content:space-between; in the parent div. Also move .total_votes from ratings if you don't want it to be centered along with the images.

This way you don’t have to worry about giving them a field.

 .ratings { border: 1px solid #CCC; overflow: visible; padding: 10px; position: relative; width: 100%; height: 100px; display:flex; align-items:center; justify-content:space-between; } .ratings_stars { background: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg') no-repeat; float: left; height: 28px; padding: 2px; width: 32px; } .ratings_vote { background: url('http://images.financialexpress.com/2015/12/Lead-image.jpg') no-repeat; } .ratings_over { background: url('http://images.financialexpress.com/2015/12/Lead-image.jpg') no-repeat; } .total_votes { background: #eaeaea; padding: 5px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-12"> <div id="rating_1" class="ratings"> <div class="star_1 ratings_stars"></div> <div class="star_2 ratings_stars"></div> <div class="star_3 ratings_stars"></div> <div class="star_4 ratings_stars"></div> <div class="star_5 ratings_stars"></div> <div class="star_6 ratings_stars"></div> <div class="star_7 ratings_stars"></div> <div class="star_8 ratings_stars"></div> <div class="star_9 ratings_stars"></div> <div class="star_10 ratings_stars"></div> </div> <div class="total_votes">vote data</div> </div> </div> 

Answer 2

just use display:inline-block and text-align:center

 .ratings { border: 1px solid #CCC; overflow: visible; padding: 10px; position: relative; width: 100%; height: 100px; text-align:center; } .ratings_stars { background: url('http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg') no-repeat; float: none; display:inline-block; height: 28px; padding: 2px; width: 32px; margin:0 10px; } .ratings_vote { background: url('http://images.financialexpress.com/2015/12/Lead-image.jpg') no-repeat; } .ratings_over { background: url('http://images.financialexpress.com/2015/12/Lead-image.jpg') no-repeat; } .total_votes { background: #eaeaea; padding: 5px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-12"> <div id="rating_1" class="ratings"> <div class="star_1 ratings_stars"></div> <div class="star_2 ratings_stars"></div> <div class="star_3 ratings_stars"></div> <div class="star_4 ratings_stars"></div> <div class="star_5 ratings_stars"></div> <div class="star_6 ratings_stars"></div> <div class="star_7 ratings_stars"></div> <div class="star_8 ratings_stars"></div> <div class="star_9 ratings_stars"></div> <div class="star_10 ratings_stars"></div> </div> <div class="total_votes">vote data</div> </div> </div> 

Answer 3

Just use the following CSS

 .ratings { display: flex; align-items: center; justify-content: space-between; } 

Answer 4

there is a tag called <center></center> , try using the <div> inside them. Example:

 <center><div class="star_3 ratings_stars"></div></center> <center><div class="star_4 ratings_stars"></div></center>