html - 正确对齐页脚文本和图像

Question

这是 the website

1. 我无法将图像与框的中心对齐。代码

.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>

我认为 bootstrap 行将 -15px 向左拉。而且我不知道该怎么办，我尝试了各种边距，我创建了一个包装 div 并尝试了边距，但没有任何效果。

1. 页脚的版权部分略高于 Linkedin 部分。我不知道该怎么办，他们必须保持一致。这当然是由字体引起的。应用填充或边距似乎没有帮助，bottom: somevalue 和绝对位置在 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 1

问题 1:将 margin: auto 赋给图像容器。最好使用 display: block 来移除图像下方的小空白。

.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>

问题 2:使用 display: inline-block 作为页脚并使用 vertical-align: top 对齐。

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

另外不要忘记清除 float。

.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>