中心浮动元素

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>