All geek questions in one place

How can I center this button without using CSS hack?

So, here is a plan of what I'm trying to do, and some element outlines: blueprint

Good, since we see that I want to move the exit button to the center of the div where (.paper) is located.

So this works:

button[id="centerprofile"]{
    text-align: center;
    margin-left: 44%;
}

However, I do not like to use this margin-left: 44%;hack. Without this hacking, the button just stays left even with text-align: center;.

How can I fully focus this button on a .paper element? Here is the rest of my code:

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 and [id = "centerprofile"] button):

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";
}
+4
source share
3 answers

Make it a block element so you can use the margins autoto center it:

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

:

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

, , @arbuthnott

.paper {
    text-align:center;
}
0

Source: https://habr.com/ru/post/1682529/

More articles:


All Articles