Question

无论我使用哪些提示谷歌，我仍然无法找到正确的代码来水平对齐我的图像。我怎样才能解决这个问题？我究竟做错了什么？请帮忙。我真的很感激。真的希望通过编码变得更好。

这是HTML

<div class="entry">
    <a target="_blank" href="toyapage.html">
        <img src="img/mypage.jpg" width="400" height="300" />         
    </a>
</div>

<div class="entry">
    <a target="_blank" href="sister.html">
        <img src="img/secondpage.jpg" width="400" height="300"/>
    </a>
</div>

<div class="entry">
    <a target="_blank" href="Welcome.html">
        <img src="img/Welcome.jpg" width="400" height="300"  />
    </a>
</div>

<div class="entry">
    <a target="_blank" href="images.html">
        <img src="Marc.jpg" width="400" height="300" />
    </a>
</div>

<div class="entry">
    <a target="_blank" href="Cooking.html">
        <img src="screenshot.png" width="400" height="300" />
    </a>
</div>

<div class="entry">
    <a target="_blank" href="Layout.html">
        <img src="screenshot.jpg" width="400" height="300" />
    </a>
</div>

<div class="entry">
    <a target="_blank" href="carbs.html#">
        <img src="carbscreenshot.jpg" width="400"   height="300" />
    </a>
</div>

<div class="entry">
    <a target="_blank" href="photo.html">
        <img src="img/screenshot22.jpg" width="400" height="300" />
    </a>
</div>

这是CSS

.entry {
    width: 1000px;
    margin: 0;
    margin-bottom: 5px;
    padding: 0;

    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.entry img {
    width: 400px;
    display: inline;
    margin: 10px;
    margin-left: 200px;
}

Answer 1

您的图片在DIV中。 DIV是块元素，默认情况下宽度为100％（=完整窗口/视口宽度）。

尝试更改此规则：

.entry {
        width: 1000px;
        margin: 0;
        margin-bottom: 5px;
        padding: 0;
}

到

.entry {
  margin-bottom: 5px;
  display: inline-block;
}

或

.entry {
      margin-bottom: 5px;
      float: left;
    }

并从display: inline;规则中删除.entry img。默认情况下，图像是内联块元素，因此该规则是多余的。

Answer 2

也许你可以将你的图像对齐在同一个tr的tds中的一个表元素中？

<table>
    <tr>
       <td>
           <div/>
           <!--Should be on the same row as the other div...-->
       </td>
       <td>
           <div/>
       </td>
    </tr>
</table>

Answer 3

尝试调整你的css以便进入。

.entry {
        width: 400px; 
        margin: 0;
        margin-bottom: 5px;
        padding: 0;
        position: relative;
        float:left;
}

将图像容器向左浮动将是一种方式。我调整了宽度，因为在大多数屏幕上1000px不能并排放置。

Answer 4

您的图片是垂直显示的，因为它们都嵌套在div标记内（不一定是错误的布局）。 div代码是块元素，因此您的图片之间会有换行符。

解决方案：您可以使用CSS强制div元素显示为内联元素。尝试添加此CSS属性：

.entry {
    display: inline;
}

如果这不起作用，请尝试使用其他类型的display值（例如inline-block）。

P.S。你会发现这篇w3schools文章很有帮助，讨论了块与内联元素和display属性：CSS Layout - The display Property

为什么我的图像水平对齐？我究竟做错了什么？

4 个答案: