How to center a circle and text in table cell with css

Question

I want to have an image as a background and center text on it no matter what the width of the table cell. So far I have the following:

For example, the first image is correct, but c is incorrect as I want the green circle centered on the x axis of the cell and the text centered on the center of this circle.

My css is as follows:

   bgCircle {
      display: inline-block;
      width: 40px;
      height: 35px;
      transform: translate (50%, 50%);
      vertical-align: middle;
      background-image: url("test.png");
      background-repeat: no-repeat;
      text-align: center;
    }

Can anyone see where I'm going wrong?

If your `bgCircle` is/having `p` then it'll work, just add `line-height` to adjust vertically. — Kunj, Jan 11 '16 at 10:49
Always add your HTML and prefferable a fiddle! `background-position: center;` will probably do the trick tho. — Clemens Himmer, Jan 11 '16 at 10:57
Duplicate - http://stackoverflow.com/questions/34681874/positioning-circle-in-table-cell-using-one-div — Paulie_D, Jan 11 '16 at 10:58

score 1 · Answer 1 · answered Jan 11 '16 at 10:43

1

Use:

background-position: center;

or specify separate values for left and top:

background-position: 50% 0;

answered Jan 11 '16 at 10:43

GolezTrol

114,394
18
182
210

Bruno J. S. Lesieur · Answer 2 · 2016-01-11T12:16:52.407

The easy way to verticaly and horizontaly center an item into another is like this:

.container {
 /* background-image: url('your background'); */
 position: relative;
 width: 200px;
 height: 200px;
 background-color: #808;
 border-radius: 50%;
}
.content {
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}

<div class="container">
    <div class="content">A</div>
</div>

So, in your case, try this:

.table {
    width: 100%;
    border: 1px solid #000;
    border-collapse: collapse;
}
.container {
    position: relative;
    height: 40px;
    border: 1px solid #000;
}
.container::before {
    content: "";
    /* background-image: url('your background'); */
    position: absolute;
    z-index: 1;
    background-color: #808;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.content {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<table class="table">
    <tr>
        <td class="container">
            <div class="content">A</div>
        </td>
        <td class="container">
            <div class="content">BB</div>
        </td>
        <td class="container">
            <div class="content">C C<br>C C</div>
        </td>
        <td class="container">
            <div class="content">D D</div>
        </td>
    </tr>
</table>

The problem is not centering the content, but centering the background. And since OP mentioned table cells, there are easier methods to center content than using transform. — GolezTrol, Jan 11 '16 at 11:15
@GolezTrol, this code is fully capable to display cell background image in a center way as you can see in the table example context. This code is also adaptable in more global case. If for this case, it is not the shorter or best answer, this answer is acceptable and give a solution to the question. — Bruno J. S. Lesieur, Jan 11 '16 at 12:06
The snippet you added just now indeed shows that. It also uses the `::before` pseudo-element to generate a background circle, which both OP and your original snippet didn't do. So, your changes do explain your intention and show that it works, although it's still a needlessly complex solution compared to just setting a background-position, and it limits you in using `::before` for other purposes. Interesting solution, though. — GolezTrol, Jan 11 '16 at 12:10

score 0 · Answer 3 · answered Jan 11 '16 at 10:49

You can do it many way.I am giving you easy way to do it.Take a look here is the solution:

You can also see in JSFIDDLE

.circle {
  width: 50px;
  height: 50px;
  border-radius: 250px;
  font-size: 25px;
  color: #fff;
  line-height: 50px;
  text-align: center;
  background: red;
  float: left;
  margin-right: 10px;
}

<div class="circle">A</div>
<div class="circle">A</div>
<div class="circle">A</div>
<div class="circle">A</div>
<div class="circle">A</div>
<div class="circle">A</div>

score 0 · Answer 4 · answered Jan 11 '16 at 10:59

Use line-height to make center proper.

.bgCircle {
    background-image: url("https://i.stack.imgur.com/qkIMm.png");
    background-size: 100% auto;
    color: #fff;
    text-align: center;
    display:inline-block;
    height: 50px;
    line-height: 50px;
    width: 50px;
}

<div class="main">
  <div class="bgCircle">a</div>
  <div class="bgCircle">b</div>
  <div class="bgCircle">c</div>
</div>

score -2 · Answer 5 · edited May 23 '17 at 10:27

-2

The trick to circle images is

img-circle {
    border-radius: 50%;
}

if you want to see this in detail please visit

http://www.abeautifulsite.net/how-to-make-rounded-images-with-css/

and to center the text over

CSS Center text (Horizontal and Vertical) inside a DIV block

edited May 23 '17 at 10:27

Community

1
1

answered Jan 11 '16 at 10:51

Om Komawar

251
3
19

1

Won't fix the OP's problem at all, he already has this in his code, this rounds the tag and positions the text, but won't position the background properly. – Clemens Himmer Jan 11 '16 at 10:57

How to center a circle and text in table cell with css

5 Answers5