中心浮動元素

Question

.key { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: red; 
 
    float: left; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
} 
 
.clearFloat { 
 
    clear: both; 
 
}

<div class="keyWrap"> 
 
    <div class="key"><span>1</span> 
 
    </div> 
 
    <div class="key">2</div> 
 
    <div class="key">3</div> 
 

 
    <div class="clearFloat"></div> 
 

 
    <div class="key">4</div> 
 
    <div class="key">5</div> 
 
    <div class="key">6</div> 
 
    <div class="clearFloat"></div> 
 

 
    <div class="key">0</div> 
 
</div>

我怎樣才能讓圓圈中的數字中心的中心？我不能做填充或保證金，因爲它會響應。

Answer 1

您可以嘗試line-height

.key { 
 
    line-height:40px; 
 
    width: 40px; 
 
    height: 40px; 
 
    background: red; 
 
    float: left; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
} 
 
.clearFloat { 
 
    clear: both; 
 
}

<div class="keyWrap"> 
 
    <div class="key"><span>1</span> 
 
    </div> 
 
    <div class="key">2</div> 
 
    <div class="key">3</div> 
 

 
    <div class="clearFloat"></div> 
 

 
    <div class="key">4</div> 
 
    <div class="key">5</div> 
 
    <div class="key">6</div> 
 
    <div class="clearFloat"></div> 
 

 
    <div class="key">0</div> 
 
</div>

Answer 2

你需要在頂部

.key { 
 
    width: 40px; 
 
padding-top:10px; 
 
    height: 30px; 
 
    background: red; 
 
    float: left; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
} 
 
.clearFloat { 
 
    clear: both; 
 
}

<div class="keyWrap"> 
 
    <div class="key"><span>1</span> 
 
    </div> 
 
    <div class="key">2</div> 
 
    <div class="key">3</div> 
 

 
    <div class="clearFloat"></div> 
 

 
    <div class="key">4</div> 
 
    <div class="key">5</div> 
 
    <div class="key">6</div> 
 
    <div class="clearFloat"></div> 
 

 
    <div class="key">0</div> 
 
</div>

Answer 3

的給填充最好的解決方案是，您可以使用display:table-cell和vertical-align:middle。而且它也是響應式的。

有一件事是，如果你改變身高，那麼它也會保持垂直中間。您也可以使用line-height，但在增加圈子高度時會發生變化。

使用它像以下：

.key { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: red; 
 
    float: left; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    display:table; 
 
} 
 
.clearFloat { 
 
    clear: both; 
 
} 
 

 
.key > span{ 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
    }

<div class="keyWrap"> 
 
    <div class="key"><span>1</span> 
 
    </div> 
 
    <div class="key"><span>2</span></div> 
 
    <div class="key"><span>3</span></div> 
 

 
    <div class="clearFloat"></div> 
 

 
    <div class="key"><span>4</span></div> 
 
    <div class="key"><span>5</span></div> 
 
    <div class="key"><span>6</span></div> 
 
    <div class="clearFloat"></div> 
 

 
    <div class="key"><span>0</span></div> 
 
</div>

Answer 4

解決方法1：line-height

.key { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: red; 
 
    float: left; 
 
    border-radius: 50%; 
 
    text-align: center; 
 
    line-height: 40px; 
 
} 
 
.clearFloat { 
 
    clear: both; 
 
}

<div class="keyWrap"> 
 
    <div class="key"><span>1</span> 
 
    </div> 
 
    <div class="key">2</div> 
 
    <div class="key">3</div> 
 

 
    <div class="clearFloat"></div> 
 

 
    <div class="key">4</div> 
 
    <div class="key">5</div> 
 
    <div class="key">6</div> 
 
    <div class="clearFloat"></div> 
 

 
    <div class="key">0</div> 
 
</div>

溶液2：flex

.key { 
 
    width: 40px; 
 
    height: 40px; 
 
    background: red; 
 
    float: left; 
 
    border-radius: 50%; 
 
    display: inline-flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.clearFloat { 
 
    clear: both; 
 
}

<div class="keyWrap"> 
 
    <div class="key"><span>1</span> 
 
    </div> 
 
    <div class="key">2</div> 
 
    <div class="key">3</div> 
 

 
    <div class="clearFloat"></div> 
 

 
    <div class="key">4</div> 
 
    <div class="key">5</div> 
 
    <div class="key">6</div> 
 
    <div class="clearFloat"></div> 
 

 
    <div class="key">0</div> 
 
</div>