CODEWITHSUNDEEP
htmlcss
Jamie Anderson
Jamie Anderson

Reputation: 1493

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 I make the number center center within the circle? I can't do padding or margin because it will be responsive.

Upvotes: 0

Views: 65

Answers (4)

ketan
ketan

Reputation: 19341

The best solution is, you can use display:table-cell and vertical-align:middle. And it is Responsive also.

And one thing is that If you change height then also it will stay vertically middle. Also You can use line-height but will change when you increase height of your circle.

Use it like following:

.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>

Upvotes: 1

chatoo2412
chatoo2412

Reputation: 128

solution1: 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>

solution2: 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>

Upvotes: 0

Mahesh Thumar
Mahesh Thumar

Reputation: 4395

You need to give padding at top

.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>

Upvotes: 0

Akshay
Akshay

Reputation: 14378

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>

Upvotes: 3

Related Questions