如何在不使用CSS hack的情况下将此按钮居中？
[英]How can I center this button without using a CSS hack?
问题描述
Ok so here is a blueprint of what I am trying to do and some element outlines: 
好的，这里是我正在尝试做的一个蓝图和一些元素概述：
Alright, so as we see I want to move the logout button to the center of the div it is in (.paper). 好吧，因为我们看到我想将注销按钮移动到div的中心（.paper）。
So this is working: 这是有效的：
button[id="centerprofile"]{
text-align: center;
margin-left: 44%;
}
However, I don't like using this margin-left: 44%; 但是，我不喜欢使用这个margin-left: 44%; hack. 黑客攻击。 Without this hack, the button just stays to the left even with text-align: center; 没有这个黑客，即使使用text-align: center; ，按钮也会保持在左侧text-align: center; . 。
How can I center this button perfectly to the .paper element it is in? 如何将此按钮完美地置于其所在的.paper元素中？ Here is the rest of my code: 这是我的其余代码：
HTML: 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: PHP $ contentDump：
$contentDump =
"
<h2>Profile</h2>
<p>Account balance: " . $balance . "BTC</p>
<button id='centerprofile'>Logout</button>
";
CSS (.button, .paper, and button[id="centerprofile"]): 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";
}
3 个解决方案
解决方案1
4 已采纳 2017-07-28 19:26:04
Make it a block element so you can use auto margins to center it: 使其成为块元素，以便您可以使用auto边距使其居中：
button[id="centerprofile"]{
display: block;
margin-left: auto;
margin-right: auto;
}
解决方案2
1 2017-07-28 19:36:28
You can use this hack: 你可以使用这个hack：
button[id="centerprofile"]{
display: block;
margin: 4px auto;
}
解决方案3
0 2017-07-28 19:36:11
The correct answer should be to center the container of the button as noted in the comment by @arbuthnott 正确的答案应该是按照@arbuthnott评论中所述的按钮容器居中
.paper {
text-align:center;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.