CODEWITHSUNDEEP
htmlcss
naomi
naomi

Reputation: 2643

Center align a display:table-cell inside a td

I'm creating an email template - using tables of course.

I have a rounded p element inside a td , in order to vertical align it's content I used the display: table-cell property.

The problem is that now the circle in not center aligned in the td any more even when using margin: 0 auto

see jsfiddle

html:

<table>
  <tr>
    <td class="circle">
      <p><b>12</b><br/>views</p>
    </td>
  </tr>
</table>

css:

td {
   width: 140px;
}

table td.circle p {
   margin: 0 auto;
   height: 70px;
   width: 70px;
   background-color: rgb(92, 177, 251);
   border-radius: 50%;
   text-align: center;
   display: table-cell;
   vertical-align: middle;
}

How can I center align the circle, without using extra positioning hacks that won't be supported in an email?

Upvotes: 0

Views: 2472

Answers (6)

jaimish11
jaimish11

Reputation: 564

If you rework you HTML slightly, you can use a combination of flexbox and table-cell:

.wrapper{
    display: flex;
    flex-direction: row;
}
.digit{
    display: table-cell;
    vertical-align: middle;
}
.text{
    display: inline;
}

<div class="wrapper">
    <div class="number">
        <div class="digit">1</div>
    </div>
    <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec id justo posuere ex pharetra euismod bibendum vel nunc. Donec pharetra ipsum sit amet augue ornare, non sodales leo dapibus. Nunc mollis sodales diam, accumsan
        suscipit justo dignissim vitae. Nunc ultrices a elit nec hendrerit. Cras tempor elit quis nulla scelerisque aliquet. Nulla efficitur ac purus vitae porttitor. Morbi commodo efficitur ornare. Curabitur a ipsum dapibus erat iaculis finibus. Nullam dui nulla,
        viverra id laoreet eget, fringilla ac orci. Nulla iaculis enim vitae dui congue accumsan. Fusce cursus justo non quam sodales blandit
    </div>
</div>

Upvotes: 0

Muralitharan V
Muralitharan V

Reputation: 127

table td.circle p {
margin: 0 auto;
height: 70px;
width: 70px;
background-color: rgb(92, 177, 251);
border-radius: 50%;
color: white;
font-size: 14px;
text-align: center;
display: table-cell;
vertical-align: middle;
position: relative;
left: 31px;
}

Add the css in that class - table td.circle p {position: relative; left: 31px; }

Upvotes: 0

SMS
SMS

Reputation: 84

Do you need likee this


  you can see the link: https://jsfiddle.net/gwmqrv8w/2/


Html code here
<table>
<tr>
  <td align="center" class="circle">
    <p>
    <b>12</b>
    <br/>
    views
    </p>
  </td>
</tr>
</table>

Css code here:
td {
  background-color: gray;
  width: 140px;
}

table td.circle p 
{
  margin: 0 auto;
  height: 70px;
  width: 70px;
  background-color: rgb(92, 177, 251);
  border-radius: 50%;
  color: white;
  font-size: 14px;
  text-align: center;
   display: table-cell;
  vertical-align:middle;
}

Upvotes: 0

hdev
hdev

Reputation: 213

vertical-align in table-cell is by default "middle" So, no need to add this property. Anyhow if you want text horizontally align center you should try following property in your HTML code it will work without using extra positioning:

<td align="center">something</td>

Upvotes: -2

Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

Add align=center in td to center the inner element, here is the updated fiddle

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39322

You need one more element inside td becaue you can't use margin: 0 auto with table-cell. Working code is in below snippet:

td {
  background-color: gray;
  width: 140px;
}

table td.circle div {
  background-color: rgb(92, 177, 251);
  border-radius: 50%;
  color: white;
  font-size: 14px;
  text-align: center;
  display: table;
  margin: 0 auto;
  height: 70px;
  width: 70px;
}

table td.circle p {
  display: table-cell;
  vertical-align: middle;
 }
<table>
  <tr>
    <td class="circle">
      <div>
        <p>
          <b>12</b>
          <br/>
          views
        </p>
      </div>
    </td>
  </tr>
</table>

Upvotes: 3

Related Questions