DIV 中的 CSS 中心中间元素，用于多种屏幕尺寸

css center middle element in div for multiple screen sizes

本文关键字：用于 屏幕 元素 CSS 中的 中间 DIV      更新时间：2023-09-26
<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 示例

您可以使用

容器的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/

我不确定我是否完全理解您的问题，但此链接可能会对您有所帮助：CSS 居中。关键是这一行：

转换：翻译(-50%，-50%(;

相关文章：