在多個屏幕尺寸的div中的css中間元素

Question

<div class="add_nav_header"> 
    <div class="centerButtons"> 
     <a class="btnLogout smallBtn" data-role="button"></a> 
     <a class="btnSearch smallBtn" data-role="button"></a> 
     <a class="btnViewList smallBtn" data-role="button"></a> 
    </div> 
</div> 

.centerButtons { 
    width: 50%; 
    margin: 0 auto; 
} 
.add_nav_header { 
    display: inline-block; 
    width: 100%; 
    border-bottom: 1px solid #ccc; 
    padding-bottom: .5em; 
} 
.smallBtn { 
    float: right; 
    margin: .3em; 
    padding: .6em; 
    font-size: .9em; 
} 
.btnLogout { 
    float: right; 
} 
.btnViewList { 
    float: left; 
} 
.btnSearch { 
    left: -33%; 
} 

這是我的html和css，我想居中btnSearch按鈕，但我不想爲媒體中的每個屏幕尺寸設置左側百分比查詢。

jsfiddle example

Answer 1

您可以使用text-align: center來容器，並刪除float您想要居中的div。

.centerButtons { 
    width: 50%; 
    margin: 0 auto; 
    text-align: center; 
} 
.add_nav_header { 
    display: inline-block; 
    width: 100%; 
    border-bottom: 1px solid #ccc; 
    padding-bottom: .5em; 
} 
.smallBtn { 
    /* float: right; */ 
    margin: .3em; 
    padding: .6em; 
    font-size: .9em; 
    display: inline-block; 
} 
.btnLogout { 
    float: left; 
} 
.btnViewList { 
    float: right; 
} 
/* .btnSearch { 
    left: -33%; 
} */ 

小提琴：http://jsfiddle.net/zfh1ono0/

Answer 2

我不知道如果我完全理解你的問題，但這種聯繫可能會幫助您：CSS centering。關鍵是這條線：

transform：translate（-50％，-50％）;