Question

我正在尝试为包含社交媒体帐户链接的网站创建一个页脚，但我无法将图像集中在一起。

文本正确居中，但显然图像不是，它们更靠近右边。

这里看起来像这样：

＆＃13;

.footer {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background-color: green;
}

.footer ul{
  list-style: none;
}

.footer ul li {
  font-size: 26px;
  display: inline-block;	
  background-color: red;
  padding-bottom: 3px;
}

.footer a {
  text-decoration: none;
  color: white;
  padding-left:10px;
  padding-right: 10px;
  text-align: center;
}

.footer a:hover {
  color: orangered;
}
.footer p{
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}

.footer img{
  text-align: center;
  opacity: 0.7;
  height: 50px;
  width: 50px;
  margin: auto;
  display: inline-block;
}
.footer img:hover{
  opacity: 1.0;
}

＆＃13;

<div class="footer">
  <ul>   
    <li><a href="mailto:bannermangavin@gmail.com"><img src="/resources/email.png" alt="mail"></a></li>
    <li><a href="https://uk.linkedin.com/in/gavin-bannerman" target="_blank"><img src="/resources/linkedin.png" alt="linkedin page"></a></li>
    <li><a href="https://github.com/gavinbannerman" target="_blank"><img src="/resources/github.png" alt="github page"></a></li>
  </ul>
  <p>Copyright Company Name &copy; 2016 | All Rights Reserved</p>
</div>

＆＃13;

我已经搜索了多个线程，甚至复制了代码，但我似乎无法让它工作。

这里是我工作的小提琴：https://jsfiddle.net/p64q1aru/

Answer 1

您尚未提供vertical-align：

.footer img {
  text-align: center;
  opacity: 0.7;
  height: 50px;
  width: 50px;
  margin: auto;
  display: inline-block;
  vertical-align: middle;   /* This is important. */
}

请使用重置。

* {
  margin: 0;
  padding: 0;
}

我已经搜索了多个线程，甚至复制了代码，但我似乎无法让它工作。

如果这是真的，那么你已经完成了所有事情而不知道如何使用它们。

工作小提琴：https://jsfiddle.net/pnkocs9d/

Answer 2

你的ul（list）有padding-left需要重置：

.footer ul {
   list-style:none;
   padding:0;
}

删除填充可解决问题并集中列表元素。

Answer 3

你应该重置ul元素的默认填充尝试添加填充：0

.footer ul{
    list-style: none;
  padding:0
}

Updated Fiddle Demo

Answer 4

为了最好地控制间距，请确保ul上的填充和边距为零，并删除列表项之间的任何换行符/间距。然后你可以在每个图标图像上使用填充来均匀地设置间距（我还没有完成这部分）。

＆＃13;

.footer {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background-color: green;
}

.footer ul{
    list-style: none;
  margin: 0;
  padding: 0;
  background: blue;
}

.footer ul li {
    display: inline-block;  
    background-color: red;
    padding-bottom: 3px;
}

.footer a {
    text-decoration: none;
    color: white;
    padding-left:10px;
    padding-right: 10px;
    text-align: center;
}

.footer a:hover {
    color: orangered;
}
.footer p{
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

img {
border: 1px solid red;
  font-size: 9px;
}

＆＃13;

<div class="footer">
    <ul>   
        <li><a href="mailto:bannermangavin@gmail.com"><img src="/resources/email.png" alt="mail"></a></li><li><a href="https://uk.linkedin.com/in/gavin-bannerman" target="_blank"><img src="/resources/linkedin.png" alt="linkedin page"></a></li><li><a href="https://github.com/gavinbannerman" target="_blank"><img src="/resources/github.png" alt="github page"></a></li>
    </ul>
    <p>Copyright Company Name &copy; 2016 | All Rights Reserved</p>
</div>

＆＃13;

Answer 5

只需添加1 948953 948956 chr1:948953-948956 . ISG15 1 949363 949858 chr1:949363-949858 . ISG15 2 800000 900500 chr1:800000-900500 . AGRN

的css规则

 1  12214   .   C   G
 1  949800  .   T   G
 2  900000  rs123   -   A
 3  900000  .   C   -

＆＃13;

tab-delimited

＆＃13;

1   949800  .   T   G     ISG15
2   900000  rs123   -   A   AGRN

＆＃13;

无法将图像居中与div中的文本对齐

5 个答案: