HTML CSS – 身体左半边的中心图像答案

【问题标题】：HTML CSS – Center image in left half of bodyHTML CSS – 身体左半边的中心图像
【发布时间】：2014-07-18 10:52:10
【问题描述】：

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

图片大小不一，所以：

宽度大于或等于 471 像素的任何图像都将调整为 471 像素宽。
宽度小于 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;
}

【问题讨论】：

标签： html css image center

【解决方案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/

【讨论】：

您好乔纳森，谢谢您的回复。我实际上试图做类似的事情，但图像继续一直停留在左侧。我将您的代码添加到我的 CSS 中，您可以在我刚刚作为评论添加到原始帖子的链接中看到示例。也许需要改变另一个类？
我已经更新了我的答案。请看我的jsfiddle。主要问题是.left-471 有一个最大宽度但没有定义宽度。您需要为其定义一个宽度，否则它将保持其内容的大小。
啊，就是这样。我还必须从 .left-471 类中删除最大宽度。一旦我这样做了，它就完美地工作了。非常感谢。

【解决方案2】：

测试这段 CSS 代码：

 .full-957 .left-471 {
  border-right: 1px solid #FF0000;
  float: left;
  width: 49%;
}
 .left-471 .image-box {
    text-align: center;
  }
  .left-471 .image-box img {
        margin: 0 auto;
   }
   .full-957 .right-471 {
         float: right;
        text-align: center;
         width: 50%;
   }
  .right-471 .row1-left span {
       float: left;
   }
   .right-471 .row1-right span {
       float: right;
    }
   .clearfix {
      clear: both;
   }
    .full-957 {
       border: 1px solid #FFD700;
       margin: 0;
       padding: 0;
      width: 100%;
   }

【讨论】：