Html 图像对齐

Html 图像对齐,html,Html,我对这方面还不太熟悉,所以,这似乎是一个非常简单的问题 我已经开始设计自己的页面,下面的代码就是我目前所处的位置 它看起来是怎样的 左上-我的徽标 右上角-导航 左侧-图像/说明 我想做的是,让描述在每个图像下面完美对齐,当你在页面上移动的时候,同样的事情也会发生 当前的情况是,每个图像和下面的描述都在页面左侧的左侧对齐 当前代码如下: <body> <div class="container"> <a href="#"><img src

我对这方面还不太熟悉,所以,这似乎是一个非常简单的问题

我已经开始设计自己的页面,下面的代码就是我目前所处的位置

它看起来是怎样的

  • 左上-我的徽标
  • 右上角-导航
  • 左侧-图像/说明
我想做的是,让描述在每个图像下面完美对齐,当你在页面上移动的时候,同样的事情也会发生

当前的情况是,每个图像和下面的描述都在页面左侧的左侧对齐

当前代码如下:

<body>
  <div class="container">
    <a href="#"><img src="#" alt="Title" width="300" height="100" /></a>
    <div id="navbar">
      <ul>
        <li><a href="#">GALLERY</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">BLOG</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </div>
    <div id="images">
      <img src="#" width="300" height="199" alt="name"></div>
      <div id="descriptions">City</div>
      <div id="images">
        <img src="#" width="300" height="199" alt="name"></div>
        <div id="descriptions">Model</div>
      </div>
  </div>
</body>

城市 模型
我会使用这样的标记:

<figure class="images">
    <img src="#" width="300" height="199" alt="City">
    <figcaption>City</figcaption>
</figure>

<figure class="images">
    <img src="#" width="300" height="199" alt="Model">
    <figcaption>Model</figcaption>
</figure>

<figure class="images">
    <img src="#" width="300" height="199" alt="Foo">
    <figcaption>Foo</figcaption>
</figure>

@chinna_82这不是表格数据。仅对表格数据使用表格。在没有桌子的情况下,有很多其他的方法可以做到这一点。太棒了!结果很好!非常感谢你。我还有几个问题:1)如果我想在左边有一个由4张图片组成的象限,那么上面的2张图片和下面的2张图片,上面的情况会发生什么变化;2) 如果我在左边有一个象限,想在右边放一个部分,在不同图片的滚动过程中显示文本,我该怎么办;3)如何在第一个图像和导航栏位于其他图像周围的位置扩展白色背景色…我为其余图像创建了一个具有白色背景和灰色背景的容器。@user1912669对于第一种情况,您可以删除
:last child
规则并添加:
。图像:第n个子(2){margin right:0;}
和一个清除浮动的附加规则:
。images:nth child(3){clear:left;}
。你的其他问题最好作为一个新问题来处理。为每个问题创建一个简明的示例,并创建新的问题。