我试图实现以下效果，这是迄今为止我的代码。<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>然而，正如您所看到的，按钮的主要部分（浅色部分）没有与较大的暗圆圈正确对齐。有谁知道为什么会出现这种情况以及如何解决？感谢您的任何帮助。
2 回答
吃鸡游戏
TA贡献1829条经验 获得超7个赞
您需要将按钮放置在中心。我已经改变了你的代码。下面的代码按预期工作正常。
<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>
慕仙森
TA贡献1827条经验 获得超7个赞
您可以在按钮周围添加足够的边距，以使按钮框的尺寸（宽度 + 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，则不会更改其位置。
回到按钮：将 top/left 设置为 50% 将按钮的左上角设置为 div 宽度/高度的中间/下方 — 对于 div 的当前大小 (80, 80)，但是如果你改变div的大小，它会自动调整。然后transform: translate(-50%, -50%)将按钮向后移动一半。最终结果是按钮在 div 内居中，并且即使更改按钮或 div 的尺寸也保持居中。
- 2 回答
- 0 关注
- 56 浏览
添加回答
举报
0/150
提交
取消