具有不同邊框寬度的相等線高度（邊框）

在這個簡化示例中，我有4個圓圈，每個圓圈都具有不同的邊框寬度，我試圖在每個圓圈中保持相等的線高度，以使它們保持水平對齊。具有不同邊框寬度的相等線高度（邊框）

不過邊框寬度似乎影響行高（儘管在技術上外箱？）

反正是有解決，而無需手動調節各行高度？

width: 50px; 
height: 50px; 
border-radius: 50px; 
border: 1px solid #1daeec; 
line-height: 50px;

例子：http://jsfiddle.net/vcJ3G/

來源

2013-08-07 Titan

有趣的問題，我想我們應該使用jQuery做，因爲即使把價值的百分比，我們總是有一個偏移量，將能夠避開邊界，我看到，jQuery做到這一點http://jsfiddle.net/vcJ3G/1/或添加類以改變行高 – artSx

當你設置'box-sizing：border-box' t他的邊界已不再是技術上的問題。然後將其包含在爲該框定義的寬度內。見https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing –

如果使用「box-shadow」，則可以避免這一切：D –

您可以刪除行高，使用display:table-cell代替，並添加vertical-align:middle;到您的統計類。

jsFiddle example

.stat { 
    display: table-cell; 
    width: 50px; 
    height: 50px; 
    border-radius: 50px; 
    border: 1px solid #1daeec; 
    text-align: center; 
    margin: 10px; 
    font-size: 16px; 
    color: #1daeec; 
    text-transform: uppercase; 
    vertical-align:middle; 
}

來源

2013-08-07 14:58:01 j08691

今天我學到了一些東西，謝謝！ – artSx

很好，謝謝你，我傾向於避免表格單元格，因爲IE7，但我可以選擇忽略這個項目。 – Titan

你的CSS工作正常，所有你需要做的就是刪除一些從頂部

* { 
    margin: 0px; 
    padding: 0px; 

}

http://jsfiddle.net/techsin/vcJ3G/15/

來源

2013-08-07 15:18:25

我沒有提到我必須在所有的圈子上保持相同的高度，因此使用了邊框。如果沒有這個解釋，你是對的，儘管如此謝謝。 – Titan

遇到了這一點，並認爲自己是怎麼回事可以做到這一點，而不使用表格單元格，我的解決方案可能不是最好的，但我只是決定無論如何分享它。 http://codepen.io/svdovichenko/pen/rObzqM?editors=110

加入<span>1</span>（可以使用類中的垃圾郵件在這個例子中沒有使用）

.stat{ 
    position: relative; 
}

和

span { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-right: -50%; 
    transform: translate(-50%, -50%); 
}

來源

2015-11-21 06:31:07 user2432772

具有不同邊框寬度的相等線高度（邊框）

回答

相關問題