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>


Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -