CODEWITHSUNDEEP
htmlcss
Apoqlite
Apoqlite

Reputation: 289

Element is not being aligned center to div

Im trying to achieve the following effect, and this is my code so far. 

<style type ="text/css">
 @font-face {
    font-family: Montserrat;
    src: url("Montserrat_Light.otf") format("opentype");
}
body{
    background-color: #c3c8c0;
}
button {
    font-family: Montserrat;
    font-size: 36px;
    color: #38332b;
    
    border-radius: 60px;
    border: 2.2px solid transparent;
    background: linear-gradient(#d8d8d8, #d0d0d0), linear-gradient(#fefcfc, #a8a4a9 60%);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;

    box-shadow: 0px 1px 0px 1px #fec75a, 0px 20px 20px 2px #b79d89, 0px 0px 20px 10px #d6cbc6; /*d6cbc6 c8c3c0*/

    height: 120px;
    width: 120px;
}
button:focus{
    outline: none;
}
.buttonholder{
    height: 160px;
    width: 160px;
    border-radius: 80px;
    background: #c3c8c0;
    box-shadow: 0px 0px 2px 1px #d6d0cc;
}
<body>

<div class="buttonholder">
    <button>
        21
    </button>
</div>
</body>

However as you can see the main part of the button (the light part) is not aligned properly with the bigger faint circle. Does anyone know why this is the case, and how to fix it? Thanks for any sort of help.

Upvotes: 1

Views: 42

Answers (2)

Peter Constable
Peter Constable

Reputation: 3570

You could add just enough margin around the button to make the dimensions of the button box (width + 2 * margin) add up to the dimension of the div. That seems a bit fragile, though: change any of the sizes and you have to fiddle with other properties to maintain the relationship.

IIUC (I'm learning this as well), the current recommendation would be to use a flex box.

@font-face {
    font-family: Montserrat;
    src: url("Montserrat_Light.otf") format("opentype");
}
body{
    background-color: #c3c8c0;
}
button {
    font-family: Montserrat;
    font-size: 36px;
    color: #38332b;
    
    border-radius: 60px;
    border: 2.2px solid transparent;
    background: linear-gradient(#d8d8d8, #d0d0d0), linear-gradient(#fefcfc, #a8a4a9 60%);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;

    box-shadow: 0px 1px 0px 1px #fec75a, 0px 20px 20px 2px #b79d89, 0px 0px 20px 10px #d6cbc6; /*d6cbc6 c8c3c0*/

    height: 120px;
    width: 120px;
}

button:focus{
    outline: none;
}

.buttonholder{
    height: 160px;
    width: 160px;
    border-radius: 80px;
    background: #c3c8c0;
    box-shadow: 0px 0px 2px 1px #d6d0cc;

/* added to make the container a flex box and center its content */
display: flex;
justify-content: center;
align-items: center
}
<div class="buttonholder">
    <button>
        21
    </button>
</div>

The display:flex property causes the .buttonholder div to layout like a flex box. The capabilities of a flex box include a simple means to center the content horizontally, using justify-content:center;, and to center the content vertically, using align-items:center;.

If you need to support older browsers that don't support display:flex, another approach would be to use absolute positioning of the button relative to the containing div combined with a translation:

@font-face {
    font-family: Montserrat;
    src: url("Montserrat_Light.otf") format("opentype");
}
body{
    background-color: #c3c8c0;
}
button {
    font-family: Montserrat;
    font-size: 36px;
    color: #38332b;
    
    border-radius: 60px;
    border: 2.2px solid transparent;
    background: linear-gradient(#d8d8d8, #d0d0d0), linear-gradient(#fefcfc, #a8a4a9 60%);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;

    box-shadow: 0px 1px 0px 1px #fec75a, 0px 20px 20px 2px #b79d89, 0px 0px 20px 10px #d6cbc6; /*d6cbc6 c8c3c0*/

    height: 120px;
    width: 120px;

/* added to get centered positioning */
margin:0;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
button:focus{
    outline: none;
}
.buttonholder{
    height: 160px;
    width: 160px;
    border-radius: 80px;
    background: #c3c8c0;
    box-shadow: 0px 0px 2px 1px #d6d0cc;

/* added to use absolute positioning of content relative to the holder */
position:relative;
}
<div class="buttonholder">
    <button>
        21
    </button>
</div>

I think that might be more robust.

To explain: position:absolute for the button provides positioning relative to the nearest positioned ancestor. Adding position:relative to .buttonholder makes the div a positioned element, but without any additional CSS doesn't change its position.

Back to the button: setting top/left to 50% sets the top-left corner of the button to halfway across/down the width/height of the div — for the current size of the div, (80, 80), but that would automatically adjust if you change the size of the div. And then transform: translate(-50%, -50%) moves the button back halfway. The end result is that the button is centered within the div, and remains centered even if you change the dimensions of the button or of the div.

Upvotes: 1

Rajeev
Rajeev

Reputation: 1488

You need to position the button in the center. I have altered your code. The below code is working fine as expected.

<style type ="text/css">
 @font-face {
    font-family: Montserrat;
    src: url("Montserrat_Light.otf") format("opentype");
}
body{
    background-color: #c3c8c0;
}
button {
    font-family: Montserrat;
    font-size: 36px;
    color: #38332b;
    
    border-radius: 60px;
    border: 2.2px solid transparent;
    background: linear-gradient(#d8d8d8, #d0d0d0), linear-gradient(#fefcfc, #a8a4a9 60%);
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;

    box-shadow: 0px 1px 0px 1px #fec75a, 0px 20px 20px 2px #b79d89, 0px 0px 20px 10px #d6cbc6; /*d6cbc6 c8c3c0*/

    height: 120px;
    width: 120px;
margin:20px;
}
button:focus{
    outline: none;
}
.buttonholder{
    height: 160px;
    width: 160px;
    border-radius: 80px;
    background: #c3c8c0;
    box-shadow: 0px 0px 2px 1px #d6d0cc;
}
<body>

<div class="buttonholder">
    <button>
        21
    </button>
</div>
</body>

Upvotes: 1

Related Questions