How to align images horizontally with auto width using CSS? - html

Question

I am making some social buttons to show horizontally aligned centre in mobile. Now there are 4 buttons and each button is made using an image so it is getting difficult to align those properly.
This is my code:
.sc1 {
width: 100%;
margin: 5px 0px;
background-color: #3498DB;
display: inline-block;
padding: 5px 10px;
border: 2px solid black;
}
.sc2 {
float: right;
border: 2px solid green;
}
.sc3 {
color: white;
float: left;
border: 2px solid red;
padding: 5px 0px;
}
.sc4 {
display: flex;
flex-direction: row;
/*width: 168px;*/
border: 2px solid yellow;
}
.sc4 .facebook-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: 0 0;
margin: 0px 5px;
}
.sc4 .twitter-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -32px 0px;
margin: 0px 5px;
}
.sc4 .google-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -125px 0px;
margin: 0px 5px;
}
.sc4 .instagram-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -63px 0px;
margin: 0px 5px;
}
#media only screen and (max-width: 400px) {
.sc2 {
width: 100%;
}
.sc3 {
width: 100%;
text-align: center;
}
}
<div class="sc1">
<div class="sc2">
<div class="sc3">
<span>Connect with us:</span>
</div>
<div class="sc4">
<a href="http://www.facebook.com" title="Like us on Facebook">
<div class="facebook-icon"></div>
</a>
<a href="http://www.twitter.com" title="Follow us on Twitter">
<div class="twitter-icon"></div>
</a>
<a href="http://www.google.com" title="Like us on Google+">
<div class="google-icon"></div>
</a>
<a href="http://www.instagram.com" title="Follow us on Instagram">
<div class="instagram-icon"></div>
</a>
</div>
</div>
</div>
What should be done to align the buttons in the centre and with equal spacing? This is the current status in which I am able to show those buttons right now.
If someone wants to see complete code then you can check it here.

Answer 1

Floats
Keeping things centered and evenly 'widthed'
container {
display: block;
width: 100%;
background-color: hsla(214, 72%, 62%, 0.2);
overflow-y: auto; /* normalizes div height of float parent */
}
imgblock {
float: left;
width: 25%;
text-align: center; /* center images */
padding: 10px; /* if you want to add padding.. */
border: 1px solid hsla(0, 0%, 0%, 0.1); /* .. or borders .. */
box-sizing: border-box; /* use this to properly calculate width % */
vertical-align: middle;
}
imgblock img {
width: 50px; height: 50px;
vertical-align: middle; /* makes img true to center, vertically speaking */
}
/* unneccesary styling */ imgblock { cursor: pointer; } imgblock:hover { background-color: hsla(64, 98%, 49%, 0.5); } imgblock:hover img { margin-top: -2px; padding-bottom: 2px;
}
<container>
<imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
<imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
<imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
<imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
</container>
fiddle
https://jsfiddle.net/Hastig/d49a4bnh/2/
Flexbox
If you meant an even width of the icon containers here is a flexbox solution
container {
display: flex;
width: 100%;
background-color: hsla(214, 72%, 62%, 0.2);
}
imgblock {
display: flex;
justify-content: center; /* centers images */
flex: 1; /* enlarge each element equally to its maximum */
padding: 10px;
}
imgblock img {
width: 50px; height: 50px;
}
/* unneccesary styling */ imgblock { cursor: pointer; } imgblock:hover { background-color: hsla(64, 98%, 49%, 0.5); } imgblock:hover img { margin-top: -2px; padding-bottom: 2px;
}
<container>
<imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
<imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
<imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
<imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
</container>
fiddle
https://jsfiddle.net/Hastig/d49a4bnh/
Inline Blocks
Here's a possible solution using inline-blocks and percentage widths
container {
display: block;
width: 100%; /* set a width so the children can calculate their widths */
background-color: hsla(214, 72%, 62%, 0.2);
font-size: 0; /* negates the space inline-blocks add after each element, font bug/flaw */
}
imgblock {
display: inline-block;
width: 25%; /* keeps each img container even */
text-align: center; /* centers the images */
padding: 10px; /* if you want to add padding.. */
box-sizing: border-box; /* use this to properly calculate width % */
}
imgblock img {
width: 50px; height: 50px;
}
/* unneccesary styling */ imgblock { cursor: pointer; } imgblock:hover { background-color: hsla(64, 98%, 49%, 0.5); } imgblock:hover img { margin-top: -2px; padding-bottom: 2px;
}
<container>
<imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
<imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
<imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
<imgblock><img src="http://i.imgur.com/fIyyVWZ.png"></imgblock>
</container>
fiddle
https://jsfiddle.net/Hastig/d49a4bnh/1/

Answer 2

OK, to make it work I had to add a couple of things to your code (I also changed a little bit to make it all the right sizes).
I added width: calc(100% - 20px); to .sc1 so that it wasn't 100% of the page + 10px.
I did the same to .sd2 within the media query.
I added .sc4 {width: 100%;} to the media query so it took up all the space it could.
I added .sc4 a {flex: 1;} to the main css, meaning each a within .sc4 will take up all the space it can.
Finally, I changed the margin for each div to margin: 0px auto; so they would appear in the center of the a tags.
Here is the final result.
.sc1 {
width: calc(100% - 20px);
margin: 5px 0px;
background-color: #3498DB;
display: inline-block;
padding: 5px 10px;
border: 2px solid black;
}
.sc2 {
float: right;
border: 2px solid green;
}
.sc3 {
color: white;
float: left;
border: 2px solid red;
padding: 5px 0px;
}
.sc4 {
display: flex;
flex-direction: row;
/*width: 168px;*/
border: 2px solid yellow;
}
.sc4 a {
flex: 1;
align-items: center;
text-align: center;
}
.sc4 .facebook-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: 0 0;
margin: 0px auto;
}
.sc4 .twitter-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -32px 0px;
margin: 0px auto;
}
.sc4 .google-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -125px 0px;
margin: 0px auto;
}
.sc4 .instagram-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -63px 0px;
margin: 0px auto;
}
#media only screen and (max-width: 400px) {
.sc2 {
width: calc(100% - 20px);
float: none;
}
.sc3 {
width: 100%;
text-align: center;
}
.sc4 {
width: 100%;
}
}
<div class="sc1">
<div class="sc2">
<div class="sc3">
<span>Connect with us:</span>
</div>
<div class="sc4">
<a href="http://www.facebook.com" title="Like us on Facebook">
<div class="facebook-icon"></div>
</a>
<a href="http://www.twitter.com" title="Follow us on Twitter">
<div class="twitter-icon"></div>
</a>
<a href="http://www.google.com" title="Like us on Google+">
<div class="google-icon"></div>
</a>
<a href="http://www.instagram.com" title="Follow us on Instagram">
<div class="instagram-icon"></div>
</a>
</div>
</div>
</div>
Hope this helps.

Answer 3

Use margin: 0 auto on their parent div to center them horizontally.

Answer 4

Add the <center> tag around all the social icons. It should look like this:
<div class= "sc1">
<div class= "sc2">
<div class= "sc3">
<span>Connect with us:</span>
</div>
<div class= "sc4"><center>
<div class="facebook-icon"></div>
<div class="twitter-icon"></div>
<div class="google-icon"></div>
<div class="instagram-icon"></div>
</center> </div>
</div>
</div>

Answer 5

Simplified a bit....
....removed floats, changed things to display properties, added text align on parent, adjusted margins, got rid of superfluous divs in anchor tags........
.sc1 {
width: 100%;
margin: 5px 0px;
background-color: #3498DB;
padding: 5px 10px;
border: 2px solid black;
text-align: center;
}
.sc2 {
width: calc((42px * 4) + 16px);
/* ^^^^
icon + it's margin/padding * number of icons --
You can remove the +16px..
that is to compensate for the borders on the
elements in this snippet.
Ideally it'll be simply ---
calc(42px * 4);
--- */
margin: 0 auto;
border: 2px solid green; }
.sc3 {
color: white;
border: 2px solid red;
display: block;
vertical-align: top;
width: 100%;
line-height: 32px; /* height of icons */
}
.sc4 {
border: 2px solid yellow;
display: block;
margin: 0 auto;
width: 100%;
}
.sc4 a {
display: inline-block;
width: 32px;
height: 32px;
margin: 0 5px; }
.facebook-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
background-position: 0 0;
}
.twitter-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
background-position: -32px 0px;
}
.google-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
background-position: -125px 0px;
}
.instagram-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
background-position: -63px 0px;
}
#media only screen and (max-width: 400px) {
.sc2 {
width: 100%;
}
.sc3 {
width: 100%;
text-align: center;
}
}
<div class="sc1">
<div class="sc2">
<div class="sc3">
<span>Connect with us:</span>
</div>
<div class="sc4">
</div>
</div>
</div>

Answer 6

I finally got the perfect answer for this problem of mine. If I simply add
.sc4 .facebook-icon, .sc4 .twitter-icon, .sc4 .google-icon, .sc4 .instagram-icon{
margin: 0px auto;
to media query and shift icon classes then it should work properly.
Here is the complete code now.
.sc1 {
width: 100%;
margin: 5px 0px;
background-color: #3498DB;
display: inline-block;
padding: 5px 10px;
}
.sc2 {
float: right;
}
.sc3 {
color: white;
float: left;
padding: 5px 0px;
}
.sc4 {
display: flex;
flex-direction: row;
}
.sc4 .facebook-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: 0 0;
margin: 0px 5px;
}
.sc4 .twitter-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -32px 0px;
margin: 0px 5px;
}
.sc4 .google-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -125px 0px;
margin: 0px 5px;
}
.sc4 .instagram-icon {
background-image: url(https://raw.githubusercontent.com/gurjyot/Social-Connections/master/images/social-connections-icons.png);
height: 32px !important;
width: 32px;
background-position: -63px 0px;
margin: 0px 5px;
}
#media only screen and (max-width: 400px){
.sc2 {
width: 100%;
float: none;
}
.sc3{
width: 100%;
text-align: center;
}
.sc4 {
width: 100%;
}
.facebook-icon, .twitter-icon, .google-icon, .instagram-icon{
width: 25%;
}
.sc4 .facebook-icon, .sc4 .twitter-icon, .sc4 .google-icon, .sc4 .instagram-icon{
margin: 0px auto;
}
}
HTLM Code
<div class= "sc1">
<div class= "sc2">
<div class= "sc3">
<span>Connect with us:</span>
</div>
<div class= "sc4">
<div class="facebook-icon"></div>
<div class="twitter-icon"></div>
<div class="google-icon"></div>
<div class="instagram-icon"></div>
</div>
</div>
</div>