Question

好的，所以这里是我正在尝试做的一个蓝图和一些元素概述：

好吧，因为我们看到我想将退出按钮移动到div的中心（.paper）。

所以这是有效的：

depenencies {
    ...

    compile (name:'somerandomlibrary-debug', ext:'aar') {
        dependencies {
            compile 'com.some:dependency:9.1.1'
            ...
        }
    }
}

但是，我不喜欢使用此button[id="centerprofile"]{ text-align: center; margin-left: 44%; }黑客。如果没有这个黑客攻击，即使使用margin-left: 44%;，按钮也会保持在左侧。

如何将此按钮完美地置于其所在的.paper元素中？这是我的其余代码：

HTML：

text-align: center;

PHP $ contentDump：

<body>

    <ul class="topnav">
        <li><a href="index.php"><i class="fa fa-rocket" aria-hidden="true"></i> Play</a></li>
        <li><a href="deposit.php"><i class="fa fa-btc" aria-hidden="true"></i> Deposit</a></li>
        <li><a href="#contact"><i class="fa fa-btc" aria-hidden="true"></i> Withdraw</a></li>
        <li><a href="faucet.php"><i class="fa fa-university" aria-hidden="true"></i>Faucet</a></li>
        <li><a href="#support"><i class="fa fa-life-ring" aria-hidden="true"></i>Help & Support</a></li>
        <?php echo $accountButton; ?>
        <li class='right' id="top-balance"><a href=''><?php echo "<i class=\"fa fa-btc\" aria-hidden=\"true\"></i>" . $balance . "BTC"; ?></a></li>
    </ul>

<div class="paper">
    <?php echo $contentDump; ?>
</div>
</body>

CSS（.button，.paper和按钮[id =＆＃34; centerprofile＆＃34;]）：

$contentDump =
            "
            <h2>Profile</h2>
            <p>Account balance: " . $balance . "BTC</p>
            <button id='centerprofile'>Logout</button>
            ";

Answer 1

将其设为块元素，以便您可以使用auto边距来居中它：

button[id="centerprofile"]{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Answer 2

你可以使用这个黑客：

button[id="centerprofile"]{
  display: block;
  margin: 4px auto;
}

Answer 3

正确答案应该是按照@arbuthnott评论中所述的按钮容器居中

.paper {
    text-align:center;
}

如何在不使用CSS hack的情况下将此按钮居中？

3 个答案: