Question

我有以下HTML代码：

<div class="inlineSearchDiv">
     <i class="fa fa-search"></i>
</div>

其中css代码如下所示：

.inlineSearchDiv {
    position:absolute;
    height:100%;
    width: 100px;
    margin-right:-100px;
    right:0;
    top:0;
    float:right;
    text-align:center;
    cursor:pointer;
}

我想知道，如何强制我的图标位于div元素的中心（水平和垂直）？这是我的尝试：

.inlineSearchDiv i {
    -moz-transform: translate(0,50%);
    -ms-transform: translate(0,50%);
    -o-transform: translate(0,50%);
    -webkit-transform: translate(0,50%);
    transform: translate(0,50%);


}

然而，inlineSearchDiv的高度会发生变化，然后我的transform属性不再刷新

Answer 1

忘记transform。将其添加到您的CSS：

 .fa-search { vertical-align:middle; }

Answer 2

根据建议，我将代码更改为以下内容：

 .inlineSearchDiv i {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

感谢您的帮助。

位于div中心的位置图标

2 个答案: