Issue
I have three buttons,
<button class="align" id="decrease">decrease</button>
<button class="align" id="reset">reset</button>
<button class="align" id="increase">increase</button>
and a CSS class,
.align{
position: absolute;
right: 50%;
display: inline-block;
}
that centers some buttons, but the end result looks like this:
Is there a way I could center them while keeping them separated, or do I have to assign them each a separate class?
I expected them to be separated because of the display: inline-block;, but they just stack on top of each other. I've tried giving them margin, but that has not worked.
Solution
You have a lot of options. The simplest is to put text-align:center; on the container element, in this case <body>. Or I also show how you can get even more control. For example, here I have active a grid with a small gap between each "column" and 5em width, so they all take up the same space. Note 16px = 1em in most modern browsers by default, but I set it as a base anyway. So 5em would be 5 x 16 pixels = 80 pixels.
Note: on both these you can remove the .align{ display: inline-block; } but that was your question thus I left that in.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 16px;
}
.align{ display: inline-block; }
/* note this is the "container" but it could be a div or some other element */
body {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(3, 5em);
align-items: center;
justify-content: center;
gap: 0.25em;
}<button class="align" id="decrease">decrease</button> <button class="align" id="reset">reset</button> <button class="align" id="increase">increase</button>The simplest option:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.align{ display: inline-block; }
/* note this is the "container" but it could be a div or some other element */
body {
text-align: center;
}<button class="align" id="decrease">decrease</button> <button class="align" id="reset">reset</button> <button class="align" id="increase">increase</button>Answered By - Mark Schultheiss
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.