我試圖實現(xiàn)以下效果，這是迄今為止我的代碼。<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>然而，正如您所看到的，按鈕的主要部分（淺色部分）沒有與較大的暗圓圈正確對齊。有誰知道為什么會出現(xiàn)這種情況以及如何解決？感謝您的任何幫助。
2 回答
吃雞游戲
TA貢獻(xiàn)1829條經(jīng)驗 獲得超7個贊
您需要將按鈕放置在中心。我已經(jīng)改變了你的代碼。下面的代碼按預(yù)期工作正常。
<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貢獻(xiàn)1827條經(jīng)驗 獲得超8個贊
您可以在按鈕周圍添加足夠的邊距，以使按鈕框的尺寸（寬度 + 2 * 邊距）加起來等于 div 的尺寸。不過，這似乎有點脆弱：更改任何大小，您都必須擺弄其他屬性來維持關(guān)系。
IIUC（我也在學(xué)習(xí)這一點），當(dāng)前的建議是使用彈性盒。
@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;彈性框的功能包括使用 使內(nèi)容水平居中以及使用 使內(nèi)容垂直居中的簡單方法align-items:center;。
如果您需要支持不支持的舊版瀏覽器display:flex，另一種方法是使用按鈕相對于包含的 div 的絕對定位并結(jié)合翻譯：
@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>
我認(rèn)為這可能會更加穩(wěn)健。
解釋一下：position:absolute為按鈕提供相對于最近定位祖先的定位。添加position:relative到 .buttonholder 會使 div 成為定位元素，但如果沒有任何附加 CSS，則不會更改其位置。
回到按鈕：將 top/left 設(shè)置為 50% 將按鈕的左上角設(shè)置為 div 寬度/高度的中間/下方 — 對于 div 的當(dāng)前大小 (80, 80)，但是如果你改變div的大小，它會自動調(diào)整。然后transform: translate(-50%, -50%)將按鈕向后移動一半。最終結(jié)果是按鈕在 div 內(nèi)居中，并且即使更改按鈕或 div 的尺寸也保持居中。
- 2 回答
- 0 關(guān)注
- 123 瀏覽
添加回答
舉報
0/150
提交
取消