用CSS製作完美的圓形div div

正如你所看到的here我有兩個div。每個div都有不同的文字。兩個div的風格相同，但id爲days的div完全是圓形的，但編號爲hour的div就像一個橢圓形。我怎樣才能使hour也是通告？用CSS製作完美的圓形div div

這裏是我的代碼：

.component { 
 
    color: white; 
 
    border: 1px solid white; 
 
    border-radius: 50%; 
 
    display: inline; 
 
    padding: 20px; 
 
} 
 
body { 
 
    background-color: black; 
 
    margin: 20px; 
 
}

<body> 
 
    <div class="component" id="days">71</div> 
 
    <div class="component" id="hour">5</div> 
 
</body>

來源

2015-11-10 Mohit Bhasi

這是因爲當你這樣說：

border-radius: 50%;

的「百分比爲橫軸指框的寬度」，根據MDN文檔（https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius）

因此，因爲您正在顯示內聯元素，所以.component元素的寬度恰好是其內容的寬度。其中一個解決方案是顯示內嵌塊的元素，並強制它們爲正方形，以便應用邊界半徑：50％的屬性將使它們都成爲完美的圓形，而不管它們的內容大小。

這裏的溶液我建議：

1）顯示.components元件內聯塊，這樣我可以在其寬度和高度作用。

2）給他們一個寬度和高度，這正是填充的大小，以便它們不會拉得太遠。

3）應用文本對齊：中心，以確保數字正確居中（這是第二個數字有問題）。

下面的代碼的演示，我建議：

.component{ 
 
    color:white; 
 
    border:1px solid white; 
 
    border-radius:50%; 
 
    display:inline-block; 
 
    padding:20px; 
 
    height: 20px; 
 
    width: 20px; 
 
    text-align:center; 
 
} 
 

 
body { 
 
    background-color: black; 
 
    margin: 20px; 
 
}

<body> 
 
    <div class="component" id="days">71</div> 
 
    <div class="component" id="hour">5</div> 
 
</body>

希望這有助於！

來源

2015-11-10 08:12:18

很好的解釋！請添加已修改代碼的演示。 –

我加了，感謝您的建議！ –

這爲我做的伎倆，不知道如果多數民衆贊成的解決方案，您正在尋找壽：

<div class="component" id="hour">&nbsp;5&nbsp;</div>

來源

2015-11-10 07:52:56

Thx，作品，但相當天真 –

你有在這種情況下使用fixed width。由於內容（71 vs 5），第一個div與第二個div相比具有更高的寬度。

Jsfiddle

.component { 
 
    color: white; 
 
    border: 1px solid white; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    width: 60px; 
 
    text-align: center; 
 
    padding: 20px 0; 
 
} 
 
body { 
 
    background-color: black; 
 
    margin: 20px; 
 
}

<body> 
 
    <div class="component" id="days">71</div> 
 
    <div class="component" id="hour">5</div> 
 
</body>

來源

2015-11-10 07:54:21 Alex

.component{ 
    color:white; 
    border:1px solid white; 
    border-radius:50%; 
    display:inline-block; 
    height:50px; 
    line-height:50px; 
    width:50px; 
    text-align: center; 
}

更新你的CSS這一點。乾杯! 見樣品小提琴：Circular Div

來源

2015-11-10 07:55:42

偉大的作品，謝謝:) –

用CSS製作完美的圓形div div

回答

相關問題