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

时间:2014-05-29 02:22:11

标签: html css image center

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

图像大小不一,所以:

  1. 任何宽度大于或等于471像素的图像大小均为471像素宽。
  2. 任何宽度小于471像素的图像都保留其原始尺寸,并在左半部分(471像素宽)水平居中。
  3. 如果可能的话,我想通过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; }
    

    ANSWER

    .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;
    }
    

2 个答案:

答案 0 :(得分:0)

你走在正确的轨道上。只需将其添加到CSS中即可。

这将使图像100%宽度达到471px。边距将为图像提供顶部和底部的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/

答案 1 :(得分:0)

测试这个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%;
   }