2

我希望能够定位图像（蓝色），以便无论它的大小如何，它始终相对于后面的 div 的基线（红色，而不是包含的 div）居中。后面的 div 将始终具有相同的大小/位置。

在此处输入图像描述

最好这将仅在我使用drupal时使用css，并且我对tpl文件之外的编辑知之甚少。

谢谢！

编辑：这是布局http://pastebin.com/SisQHM4y

4

2 回答 2

1

嗨，你可以像这样做这个纯 CSS

css

.wraptocenter {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 500px;
    height: 400px;
    background:green;
}

HTML

<div class="wraptocenter"><img src="//?" alt="images" /></div>

现场演示http://jsfiddle.net/rohitazad/tvrMp/

有关此http://www.brunildo.org/test/img_center.html的更多信息 ​</p>

于 2012-04-05T06:44:39.713 回答
0

也许是这样的：

<style>
 #blue { margin-left:auto;margin-right:auto; }
</style>

<div id="red">
 <div id="blue">
  <img src="?" id="myImg" />
 </div>
</div>

编辑

我明白了，所以您希望将 x 轴水平居中，而不是垂直居中。而且那个链接有点乱。也许你可以尝试

<style>
 .user-picture { margin-top: auto; margin-bottom: auto; }
</style>


<div class="content">
<div class="profile" typeof="sioc:UserAccount" about="/users/diver1">
    <div class="user-picture">
        <a href="/users/diver1" title="View user profile." class="active">
        <img typeof="foaf:Image" src="http://waterworksworldwide.com/sites/default/files/pictures/picture-126-1333572014.gif" alt="Diver1&#039;s picture" title="Diver1&#039;s picture" />
    </a>  
</div>
</div>

正如问题中的红色和蓝色所暗示的那样，我仍然很难看到区域之间的重叠在哪里。如果与我的建议没有重叠，请告诉我，也许我们可以尝试使用一些变体position: absolute;

于 2012-04-04T21:39:10.303 回答