如何从中心，而不是顶部/底部/边，使用css

问题描述：

对齐任何大小的图像我想能够定位图像（蓝色），以便它的大小是什么，它是总是相对于背后的div的基线居中（红色，而不是包含div）。后面的div始终是相同的大小/位置。如何从中心，而不是顶部/底部/边，使用css

enter image description here

优选地，这将是使用CSS仅作为我使用Drupal和我不知道很多有关编辑超出了第三方物流的文件。

谢谢！

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

你尝试过什么到目前为止

的更多信息？任何在jsfiddle.net上发布代码的机会？ – Filype 2012-04-04 21:37:58

在CSS中垂直对齐是一个严重的痛苦。大多数解决方案都是讨厌的黑客行为，需要额外的标记才能运作 – 2012-04-04 21:39:35

@Filype迄今为止，我真的不知道如何处理它。 – Supertod 2012-04-04 21:42:21

答

嗨，你可以这样做纯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://www.brunildo.org/test/img_center.html

辉煌，谢谢！ – Supertod 2012-04-05 12:50:02

答

也许是这样的：

<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="https://stackoverflow.com/users/diver1"> 
    <div class="user-picture"> 
     <a href="https://stackoverflow.com/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;

我相信OP是问如何沿着包含div的基线放置中心x轴，而不是在包含div中水平居中。 – 2012-04-04 21:44:17

我使用的是drupal，所以我不能在不使用某些PHP（我不熟悉）的情况下更改html布局。此刻蓝色不包含在红色的div中。编辑：@BryanDowning是的，没错。 – Supertod 2012-04-04 21:44:26

@BryanDowning - 啊，我误解了那部分。这需要一些javascript我相信。 – 2012-04-04 21:46:52

如何从中心，而不是顶部/底部/边，使用css

相关推荐