Question

我想将图像置于ID＆＃34;图像＆＃34;向右和垂直。

使用PHP我创建我的DIV如下：

echo 
    "<div class=\"first\">
    <div id=\"second\"><label id=\"second_div_label\"></label>
    <img id=\"image\" src=\"images/my_image.png\"/>
    </div>
    <div id=\"third\"></div>
    </div>";

我的CSS代码是

.first {
    display: block;
    width: 50%;
    height: auto;
    margin: 0px auto;
    margin-bottom: 15px;
}

#second {
    margin-top: 5%;
    background-color: #3f51b5;
    border-radius: 5px;
    font-weight: bold;
    padding: 20px;
}

#third {
    margin-top: 15px;
    border-radius: 5px;
    padding: 20px;
}   

#image {
    width: 35px;
    height: 35px;
    float: right;
}

感谢float:right，图片位于DIV的右侧，但它不是垂直居中，margin-bottom不起作用。我该如何解决这个问题？

Answer 1

您可以使用position:absolute技巧，然后使用SebastianEkström的wonderful code将其设置为右侧和垂直中心。请注意，为了实现此目的，父标记必须具有position:relative

由于元素绝对定位，因此不需要float:right

示例：

.first {
    display: block;
    width: 50%;
    height: auto;
    margin: 0px auto;
    margin-bottom: 15px;
}

#second {
    margin-top: 5%;
    background-color: #3f51b5;
    border-radius: 5px;
    font-weight: bold;
    padding: 20px;
    position:relative;
}

#third {
    margin-top: 15px;
    border-radius: 5px;
    padding: 20px;
}   

#image {
    width: 35px;
    height: 35px;
    position:absolute;
    top: 50%;
    right:10px;
    transform: translateY(-50%);
}

<div class="first">
    <div id="second">
      <label id="second_div_label"></label>
      <img id="image" src="http://i.stack.imgur.com/CE5lz.png"/>
    </div>
    <div id="third"></div>
</div>

P.S您可能希望为转换属性添加供应商前缀

  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

Answer 2

Aziz的CSS应该适用于现代浏览器。但是，对于轻松的跨浏览器体验，如果您不介意使用javascript，可以考虑使用jQuery：

<script>
    $(document).ready(function(){
        $('#image').position({
            my: 'right center',
            at: 'right center',
            of: '.first'    //or whichever container you wish to use
        });
    });
</script>

那么你就不需要在CSS中实现浮动和相对和绝对定位。

Answer 3

#image {
        width:35px;
        height:35px;
        float:right;
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
  }

请将此样式添加到图像中。请注意，还有一件事，你必须为父div（id = second）定义一个高度，它的值大于图像高度。

在div中垂直和向右居中图像

3 个答案: