Question

我想将底部文字与图标对齐，并在所有图标之间设置相等的空格

<div id="middle">
    <div class="icon_middle"><img src="images/smart_tv.jpg" align="middle">Smart TV</div>
    <div class="icon_middle"><img src="images/tablet.jpg" align="middle">Tablet</div>
    <div class="icon_middle"><img src="images/iphone.jpg" align="middle"></div>
    <div class="icon_middle"><img src="images/android.jpg" align="middle">Android</div>
    <div class="icon_middle"><img src="images/pc.jpg" align="middle">Pc</div>
    <div class="icon_middle"><img src="images/mac.jpg" align="middle">Mac</div>
    <div id="middle_txt">
      <h1>dfgdfgdfgd</h1>
      <div id="middle_border"></div>
      <h2>dfgdfgdfgdg</h2>
    </div><!--close_middle_txt-->
</div><!--middle-->

Answer 1

对于所有图标（图像）之间的相等空格，请使用填充：

img {
  padding: 0 10px; // 10px horizontal padding
}

要对齐它，请使用：

h1 {
  float: left;
}

h2 {
  float: right;
}

对于中间边框，我不确定，但如果你想要一个边框，那么只需添加：

#middle_border {
  border: 1px solid #999; // or anyother color
}

对于中间文本元素，请使用：

#middle_txt {
  text-align: center; // to align its children to the center..
  // or use this:
  width: 100px;
  margin: 0 auto; // it will be placed in the center..
}

Answer 2

我要回答“在所有图标部分之间制作相等的空格。首先，我假设所有图标（jpgs）都具有相同的尺寸。

您可以尝试添加填充或边距（-left＆amp; -right）以使它们具有相同的分隔宽度：

.icon_middle {
    float: right;
    text-align: bottom-center;
    width: 100px;
    height: 85px;
    padding-left: 20;
    padding-right: 20px;
}

但我不清楚这是你的问题吗？你可以给一些更多的背景/表达吗？

如何将底部文本对齐到图标的中间

2 个答案: