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用于容器，并从想要居中的div中删除float。

.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。关键是这一行：

转换：翻译（-50％， - 50％）;

div中的css center middle元素用于多种屏幕尺寸

2 个答案: