正确对齐页脚文本和图像

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>

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

1. 页脚的版权部分略高于Linkedin 部分。我不知道该怎么做，它们必须对齐。这当然是由字体引起的。应用填充或边距似乎没有帮助，bottom: somevalue 和绝对位置在引导程序中也不起作用。

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

别忘了清除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>

Answer 2

你想要的东西

.index_image{
  margin-left: auto;
  margin-right: 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%;
  

}

<div class="row index_image">
<div class="col-md-12 center" style="text-align: center">
<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>
</div>

Answer 3

我认为您的第一个问题已经得到解答，对于不均匀的页脚链接，我会这样做。这是假设您的页脚显然在容器中。

    .copyright{
      float: left;
      font: normal normal normal 12px/1.3em Arial,'ms pgothic',helvetica,sans-serif;
        color: #616060;
        text-align: left; 
position: relative;
padding-top: 100%;

    }
    .linkedin{
      float: right;
      color: #043551;
      font: normal normal normal 20px Arial,'ms pgothic',helvetica,sans-serif;
      text-align: right;
position: relative;
left: 100%;
padding-top: 98%;
    }

    <div style="width:300px; height:10px;">
    <div class="col-xs-6 copyright">
    © 2016 company
    </div>
    <div class="col-xs-6 linkedin">
    	Follow us on <a someheref>
    </a>
    </div>
    </div>