Question

所以我正在建立一个小网站来营销我要创建的应用程序。我希望屏幕底部有三个社交媒体图标，水平对齐屏幕中间。

我把三个图标放在一个div中，无论我尝试多少，我都无法弄清楚如何正确对齐！

请注意，我今天开始使用HTML和CSS，所以请原谅我的极其可怕的代码。

<div style="text-align:middle">
    <ul style="white-space:nowrap; display:inline; list-style:none;">
        <li style="white-space:nowrap; display:inline; list-style:none; padding:30px;">
            <img src="images/custom/facebook.png" height="60"></img></li>
        <li style="white-space:nowrap; display:inline; list-style:none; text-align:center;">
            <img src="images/custom/twitter.png" height="60"></img></li>
        <li style="white-space:nowrap; display:inline; list-style:none; padding:30px;">
            <img src="images/custom/gmail.png" height="60"></img></li> 
    </ul>
</div>

感谢任何帮助。

谢谢，

大卫

Answer 1

您需要使用text-align:center：

＆＃13;

<div style="text-align:center">
    <ul style="white-space:nowrap; display:inline; list-style:none;">
        <li style="white-space:nowrap; display:inline; list-style:none; 
            padding:30px;">
            <img src="http://placehold.it/60" height="60" /></li>
        <li style="white-space:nowrap; display:inline; list-style:none; text-
            align:center;">
            <img src="http://placehold.it/60" height="60" /></li>
        <li style="white-space:nowrap; display:inline; list-style:none; 
            padding:30px;">
            <img src="http://placehold.it/60" height="60" /></li> 
    </ul>
</div>

＆＃13;

Answer 2

我会使用弹性框来居中你的div。它是一个更现代化的解决方案，如果您想要使用灵活项目，也可以很好地扩展。

<div style="display: flex; justify-content: center;">
    <ul style="white-space:nowrap; display:inline; list-style:none;">
        <li style="white-space:nowrap; display:inline; list-style:none; 
            padding:30px;">
            <img src="images/custom/facebook.png" height="60"></li>
        <li style="white-space:nowrap; display:inline; list-style:none; text-
            align:center;">
            <img src="images/custom/twitter.png" height="60"></li>
        <li style="white-space:nowrap; display:inline; list-style:none; 
            padding:30px;">
            <img src="images/custom/gmail.png" height="60"></li> 
    </ul>
</div>

您可以详细了解弹性框here。或者，如果您更像是游戏玩家，则可以使用互动教程here。

Answer 3

首先，分开你的html和css。其次，我怀疑你需要ul和li。这是html：

<div class="social">
    <img src="images/custom/facebook.png" class="social-icon">
    <img src="images/custom/twitter.png" class="social-icon">
    <img src="images/custom/gmail.png" class="social-icon">
</div>

然后，css：

.social {
    text-align: center; //not middle
}

.social-icon {
    height: 60px;
    padding: 20px;  // your choice here
    float: left;
}

更好的方法是在css中使用flex属性：

.social {
    display: flex;
    padding: 10px; // your choice here
}

.social-icon {
    flex: 1 0 30%; // experiment with the last value
    padding: 20px; // your choice here as well
}

Answer 4

您可以使用 Flexbox 执行此操作：

＆＃13;

* {margin: 0; padding: 0; box-sizing: border-box}

ul {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  background: Lavender;
}

ul, li {
  white-space: nowrap;
}

ul li {
  list-style: none;
  padding: 30px;
}

img {
  height: 60px;
}

＆＃13;

<div>
  <ul>
    <li>
      <img src="http://placehold.it/60x60" alt="">
    </li>
    <li>
      <img src="http://placehold.it/60x60" alt="">
    </li>
    <li>
      <img src="http://placehold.it/60x60" alt="">
    </li> 
  </ul>
</div>

＆＃13;

在div中居中三个图像

4 个答案: