对齐一个元素，在一个元素内

看着我附加的图像，我试图让包含图像（带有红色边框）的较暗的矩形形状在较浅的灰色正方形的底部中心对齐。对齐一个元素，在一个元素内

enter image description here

我已经尝试了黑色矩形与0px bottom设置为position:absolute但后来我用margin:0 auto失去了我的中心对齐。我也尝试过使用vertical-align:bottom，但仍然不会打球！

这样做的正确方法是什么？要记住的一件事是，我已经使用了170 x 105的尺寸，这些实际上是未知的，因为它们是动态生成的元素，尺寸是可变的。

这是我到目前为止的代码：

.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; } 
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; vertical-align:bottom; } 
.item_preview_img_wrap img { margin:0 auto; border:solid 5px #FF0000; } 

<div class="gallery_item"> 
    <div class="item_preview"> 
     <div class="item_preview_img_wrap"> 
      <img src="asf.jpg"> 
     </div> 
    </div> 

    <div class="item_options"> 
     options 
    </div> 

    <div class="item_info_header"> 
     <div class="date">Date</div> 
     <div class="item">ID</div> 
     <div class="clear"></div> 
    </div> 

    <div class="item_info_main"> 
     <p class="caption">Caption here</p> 
     <p class="subject"><strong>People:<strong> People here</p> 
    </div> 
</div>

来源

2012-04-11 TheCarver

如果你想在浅灰色框底部显示的图像，然后使用CSS下面：

.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; } 
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; } 
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }

注：-halfofimagewidth是你的，例如图像大小的一半，如果你的形象是100像素和边框是5px的牛逼母鸡应该是-55px

如果你想在中心驿站灰色框的底部显示图像，然后使用下面的CSS：

.item_preview { width:220px; height:200px; text-align:center; background:#EEE; } 
    .item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; position: relative; } 
    .item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }

让我知道如果你仍然发现任何问题

来源

2012-04-16 12:21:46 Tarun

的是机箱内总是会相对于外箱的宽度是多少？如果是这样，你可以用一个百分比你像这样左值...

http://jsfiddle.net/hcharge/zYprr/

来源

2012-04-11 16:17:30 hcharge

这是好的，但我不知道darkGreyBox的大小（你使用150x150的地方）。 – TheCarver 2012-04-11 17:06:18

这样写：

.item_preview_img_wrap { 
width:170px; 
height:105px; 
position:absolute; 
left:50%; 
margin-left:-85px; 
bottom:0; 
background:#CCC; 
}

来源

2012-04-11 16:17:47 sandeep

对齐一个元素，在一个元素内

回答

相关问题