HTML CSS - body 左半部分的中心图像

Question

我试图将图像水平居中放置在网页正文的左半部分。总宽度为 957px，两半之间的边距为 15px，每半为 471。右侧实际上有 4 行元素，但我在示例中只包含了 1 行。这些元素需要留在右半部分。

图片大小不一，所以:

1. 宽度大于或等于 471 像素的任何图片都将调整为 471 像素宽。
2. 任何宽度小于 471 像素的图片都将保留其原始大小并在左半部分水平居中(471 像素宽)。

如果可能的话，我想通过 CSS 而不更改 HTML 来完成此操作，但我也想知道应该如何设置它。

这是 HTML:

<div class="full-957">

  <div class="left-471">
    <p class="image-box">
      <img id="image" src="http://icons.iconarchive.com/icons/hopstarter/social-bookmark/64/Photobucket-icon.png"/>
    </p>
  </div>

  <div class="right-471">

    <div class="row1-left">
      <span>
        ROW1-LEFT
      </span>
    </div>

    <div class="row1-right">
      <span>
        ROW1-RIGHT
      </span>
    </div>


  </div>
</div>

这是 CSS:

.full-957 .left-471 { float:left; max-width:471px; margin:0px 15px 15px 0px; }
.left-471 .image-box { width:100%; }

.full-957 .right-471 { float:right; width:471px; margin:0px 0px 15px 0px }
.right-471 .row1-left span { float:left; clear:both; margin:0px 0px 15px; }
.right-471 .row1-right span { float:right; margin:0px 0px 15px; }

---

回答

.full-957 .left-471 {
    float:left;
    width:471px;
    margin:0px 15px 15px 0px;
}
.left-471 .image-box {
}
.left-471 .image-box img {
    max-width:471px;
    margin:0 auto;
    display:block;
}
.full-957 .right-471 {
    float:right;
    width:471px;
    margin:0px 0px 15px 0px
}
.right-471 .row1-left span {
    float:left;
    clear:both;
    margin:0px 0px 15px;
}
.right-471 .row1-right span {
    float:right;
    margin:0px 0px 15px;
}

Answer 1

您走在正确的轨道上。只需将其添加到您的 CSS。

这将使图像 100% 宽度达到 471 像素。边距将为图像提供 0px 的顶部和底部边距，并为左侧和右侧提供自动边距，这将使图像居中。

.left-471 {
    float:     left;
    max-width: 471px;
    width:     50%;
    margin:    0px 15px 15px 0px;
}

.left-471 .image-box img {
    width:     auto;
    max-width: 471px;
    height:    auto;
    margin:    0 auto;
    display:   block;
}

您会注意到我没有使用您使用的#image id。这是因为您表示会有多个图像并且您不能重复 ID。为此，只需使用 img 指定 .image-box 类中的任何图像。

http://jsfiddle.net/5uLus/11/