Question

我有这个jsFiddle：Click here

<div class="image-info">
        <img id="cart-image" src="http://www.wonderoftech.com/wp-content/uploads/2013/07/BlackBerry-Q10-Sample-3-300x300.jpg">
        <div class="pizza-hint">sample text</div>
</div>

所以在上面的小提琴中你可以看到，当你悬停在div上时，示例文本实际上并不是水平居中的，我尝试了自动保证金，但它没有用。

我的问题是，当文字长度增加时，如何自动居中？

Answer 1

像这样：

Demo

添加内容：

.image-info {
    position: relative;
    display: inline-block; <-added
    font-size: 0;          <-added
}

div:HOVER .pizza-hint {
    display: block;
    position: absolute;
    top: 50%;                                  <- changed
    left: 50%;                                 <- changed
    border: 1px solid white;                   
    -ms-transform: translate(-50%,-50%);       <- added
     -webkit-transform: translate(-50%,-50%);  <- added
    transform: translate(-50%,-50%);           <- added
    margin-left: 0;                            <- changed
    margin-right: 0;                           <- changed
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
    background-color: rgba(227, 255, 255, 0.7);
    background: rgba(227, 255, 255, 0.7);
}

Answer 2

跨浏览器解决方案，

使用Image作为image-info div的背景图像。并使用下面的css，

HTML：

<div class="image-info" style="background-image:url(http://www.wonderoftech.com/wp-content/uploads/2013/07/BlackBerry-Q10-Sample-3-300x300.jpg);">
    <div class="pizza-hint">sample text</div>
</div>

CSS：

.image-info {
    width:300px;
    height:300px;
    text-align: center;
    background-color:blue;
}
.image-info:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

.pizza-hint {
    font-size: 16px;
    border: 1px solid white;
    display: none;
    vertical-align: middle;
    border: 1px solid white;
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
    background-color: rgba(227, 255, 255, 0.7);
    background: rgba(227, 255, 255, 0.7);
}

div:HOVER .pizza-hint {
    display: inline-block;
}

HTML，CSS fiddle here

自动将div放在div内

2 个答案: