Question

我的网站有以下代码，我正在尝试将图像集中在网页上

<ul class="">
        <a href="https://www.github.com">
          <img style="height:auto; width:auto; max-width:50px; max-height:50px;" src="images/github.png" border="0" alt="Code" class="">
        </a>
        <a href="http://www.linkedin.com">
          <img style="height:auto; width:auto; max-width:50px; max-height:50px;" src="images/linkedin.png" border="0" alt="Connect" class="">
        </a>
        <a href="https://www.twitter.com">
          <img style="height:auto; width:auto; max-width:50px; max-height:50px;" src="images/twitter.png" border="0" alt="Twitter">
        </a>
      </ul>

我还有以下CSS：

a{
    color:black;
    text-decoration: none;
  margin: 0px auto;
  width: 400px;
}
ul{
    padding: 0;
}

我需要做些什么来将我网站上的所有三个图片链接集中在一起？

Answer 1

使用

<ul style="display:block;margin:0px auto;">
  ///tags
</ul>

它将证明ul标签。

<ul style="width:100%;display:block;text-align:center;">
   ///tags
 </ul>

它将证明ul标签的内容

Answer 2

使用此代码：

DEMO

ul{
    padding: 0;
    text-align:center;  /*  added  */
}

Answer 3

    ul{
    margin: 0 auto; /* For hate it at the center*/
    padding: 0;
    width: aWidthToTheDiv; /* You could set it to 100% or an value as 800px (example) */
}

完成了：）

这应该有用，你也可以添加一个标签为“text-align：center;”但是这会将所有文本保留在中心位置，并且可能您希望将其放在其他位置。

Answer 4

由于您未使用<li>标记以及<ul>

我建议您使用<p>标记。

这可能很有趣。但它很简单，你不需要做任何额外的造型。

您需要做的就是添加text-align:center

尝试这个 - ＆gt; WORKING DEMO

如何使用链接居中一组图像

4 个答案: