我试图将图像水平居中于网页正文的左半部分。总宽度为957px,两半之间的边距为15px,每个边距为471。右侧实际上有4行元素,但我只包含1行示例。这些元素需要留在右半边。
图像大小不一,所以:
如果可能的话,我想通过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;
}
答案 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
类中的任何图像。
答案 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%;
}