html - center float elements -
.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>
how can make number center center within circle? can't padding or margin because responsive.
you can try 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>