Lynob Lynob - 3 months ago 10
CSS Question

aligning the footer text and the images correctly

This is the website


  1. I'm issues aligning the images to the center of the box. The code





.index_image{
width: 70%;
height: 20%;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
background-color: rgba(255, 255, 255, 1);
border: 2px solid rgba(255, 255, 255, 1);
}
.index_image img{
width: 100%;
height: 100%;
}

<div class="row index_image">
<img src="https://static.wixstatic.com/media/84770f_dec41f79f196959a09f9a7d88a507b86.jpg/v1/fill/w_266,h_85,al_c,q_80,usm_0.66_1.00_0.01/84770f_dec41f79f196959a09f9a7d88a507b86.jpg" >
</div>





I think bootstrap row is pulling -15px to the left. And I don't know what to do about it, I tried all kinds of margin and I created a wrapper div and tried margin, nothing worked.


  1. The copyright section of the footer is slightly higher than the Linkedin section. and I don't know what to do about it, they have to be aligned. This is caused by the font of course. applying padding or margin doesn't seem to help, nor
    bottom: somevalue
    and absolute positions don't work in bootstrap.





.copyright{
float: left;
font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
color: #616060;
text-align: left;
}
.linkedin{
float: right;
color: #043551;
font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
text-align: right;
}

<div class="row footer">
<div class="col-xs-6 copyright">
© 2016 company
</div>
<div class="col-xs-6 linkedin">
Follow us on <a someheref>
</a>
</div>
</div>




Answer

Issue 1 : Give margin: auto to the image container. And it always better to give display: block to remove the small whitespace below the image.

.index_image{
  margin: auto;
  width: 70%;
  height: 20%;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  background-color: rgba(255, 255, 255, 1);
  border: 2px solid rgba(255, 255, 255, 1);    
}
.index_image img{
  width: 100%;
  height: 100%;
  display: block;
}
<div class="row index_image">
<img src="https://static.wixstatic.com/media/84770f_dec41f79f196959a09f9a7d88a507b86.jpg/v1/fill/w_266,h_85,al_c,q_80,usm_0.66_1.00_0.01/84770f_dec41f79f196959a09f9a7d88a507b86.jpg" >
</div>

Issue 2 : Use display: inline-block for the footer and align using vertical-align: top.

.footer .copyright,
.footer .linkedin {
  display: inline-block;
  vertical-align: top;
}

Also don't forget to clear the floats.

.footer:after {
  content: '';
  display: block;
  clear: both;
}

.copyright {
  float: left;
  font: normal normal normal 12px/1.3em Arial, 'ms pgothic', helvetica, sans-serif;
  color: #616060;
  text-align: left;
}
.linkedin {
  float: right;
  color: #043551;
  font: normal normal normal 20px Arial, 'ms pgothic', helvetica, sans-serif;
  text-align: right;
}
/*clears float*/

.footer:after {
  content: '';
  display: block;
  clear: both;
}
.footer .copyright,
.footer .linkedin {
  display: inline-block;
  vertical-align: top;
}
<div class="row footer">
  <div class="col-xs-6 copyright">
    © 2016 company
  </div>
  <div class="col-xs-6 linkedin">
    Follow us on
    <a someheref>
    </a>
  </div>
</div>