Question

我正在尝试实现following effect，这是到目前为止的代码。

<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>

但是，您可以看到按钮的主要部分（浅色部分）未与较大的模糊圆圈正确对齐。有谁知道为什么会这样，如何解决？感谢您提供的任何帮助。

Answer 1

您需要将按钮放置在中间。我已经更改了您的代码。下面的代码按预期工作正常。

<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>

Answer 2

您可以在按钮周围添加足够的边距，以使按钮框的尺寸（宽度+ 2 *边距）加起来等于div的尺寸。不过，这似乎有些脆弱：更改任何大小，您必须摆弄其他属性才能保持这种关系。

IIUC（我也在学习这一点），当前的建议是使用弹性盒。

@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>

display:flex属性使.buttonholder div像弹性框一样进行布局。弹性框的功能包括使用justify-content:center;将内容水平居中并使用align-items:center;将内容垂直居中的简单方法。

如果您需要支持不支持display:flex的旧版浏览器，另一种方法是将按钮相对于包含div的绝对位置与翻译结合使用：

@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>

我认为这可能更强大。

说明：position:absolute用于提供相对于最近定位的祖先的定位。将position:relative添加到.buttonholder可使div成为定位元素，但是没有任何其他CSS不会改变其位置。

返回到按钮：将上/左设置为50％，将按钮的左上角设置为在div的宽度/高度的中间/向下（对于div的当前大小，为（80，80）），但是如果您更改div的大小，它将自动进行调整。然后transform: translate(-50%, -50%)将按钮移回一半。最终结果是该按钮在div内居中，即使更改按钮或div的尺寸也保持居中。

元素未与div居中对齐

2 个答案: