外层div用text-align:center;里面的button部分居中，部分分开

Question

问题描述

希望让两个button居中，一个i的问号纽靠右中

相关代码

<div id="butonStyle" class="exportTable" style="text-align: center;margin-top: 30px">
    <button class="buttonWorring" style="margin-right: 20px" onclick="queryInBalance();">模块内平衡性</button>
    <button class="buttonWorring" onclick="queryBtnBalance();">模块间平衡性</button>
    <el-popover
            placement="bottom"
            width="400"
            trigger="hover">
        <el-table :data="gridData">
            <el-table-column width="150" property="date" label="日期"></el-table-column>
            <el-table-column width="100" property="name" label="姓名"></el-table-column>
            <el-table-column width="300" property="address" label="地址"></el-table-column>
        </el-table>
        <i class="el-icon-question"  slot="reference" style="font-size: 35px;float: right;"></i>
    </el-popover>
</div>

你期待的结果是什么？实际看到的错误信息又是什么？

期待两个按钮居中，问号纽居中右；
实际对i用margin时，会导致button不居中。

Answer 1

https://codesandbox.io/s/vue-...

#butonStyle {
  position: relative;
}

#butonStyle > span:last-child {
  bottom: 0;
  margin: auto 0;
  position: absolute;
  right: 0;
  top: 0;
}