好的,这里是我正在尝试做的事情的蓝图和一些元素大纲:
好吧,正如我们所见,我想将注销按钮移动到它所在的 div 的中心 (.paper)。
所以这是有效的:
button[id="centerprofile"]{
text-align: center;
margin-left: 44%;
}
但是,我不喜欢使用这个
margin-left: 44%;
hack。如果没有这个 hack,即使使用 text-align: center;
,按钮也会保持在左侧。我怎样才能把这个按钮完美地居中到它所在的 .paper 元素?这是我的其余代码:
HTML:
<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>
PHP $contentDump:
$contentDump =
"
<h2>Profile</h2>
<p>Account balance: " . $balance . "BTC</p>
<button id='centerprofile'>Logout</button>
";
CSS(.button、.paper 和 button[id="centerprofile"]):
button[id="centerprofile"]{
text-align: center;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.paper{
border: 6px solid white;
height: auto;
margin: 20px;
padding: 20px;
width: auto;
background-color: white;
margin-left: 3%;
margin-right: 3%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
font-family: "smooth";
}
最佳答案
使其成为块元素,以便您可以使用 auto
边距将其居中:
button[id="centerprofile"]{
display: block;
margin-left: auto;
margin-right: auto;
}
关于css - 如何在不使用 CSS hack 的情况下将此按钮居中?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45380980/