CODEWITHSUNDEEP
htmlhtml-tablecentering
Lindsey Ripley
Lindsey Ripley

Reputation: 11

Vertically centering text and images in a table

I'm trying to create a table and vertically center the text and images in each row. I have tried adding style=vertical-align:middle in both the td and tr elements with no luck.

Here's what I've got for the first couple rows of the table:

<table border="1" cellpadding="3" cellspacing="1" class="table dataTable" style="border:1px solid #f0f0f0;">
  <tbody>
    <tr style="background: #f0f0f0;">
      <td colspan="3"><strong>Use Case</strong></td>
    </tr>
    <tr>
      <td colspan="3">
        <p><img align="left" alt="" background:="" class="img-responsive" src="imgname" style="width: 50px; height: 50px; margin-left:10px; margin-right: 10px;" />Live event broadcasting</p>
      </td>
    </tr>
    <tr style="background: #f0f0f0;">
      <td colspan="3"><strong>Industry</strong></td>
    </tr>
    <tr>
      <td colspan="3">
        <p style="margin-left:10px;">Nonprofit</p>
      </td>
    </tr>

With this code (and pretty much all other variables I've tried), the table ends up looking like this: table

Any advice you have would be helpful!

Upvotes: 1

Views: 29

Answers (1)

user3589620
user3589620

Reputation:

You could add a flexbox with align-items: center

.flexbox {
  display: flex;
  align-items: center;
}
<table border="1" cellpadding="3" cellspacing="1" class="table dataTable" style="border:1px solid #f0f0f0;">
  <tbody>
    <tr style="background: #f0f0f0;">
      <td colspan="3"><strong>Use Case</strong></td>
    </tr>
    <tr>
      <td colspan="3">
        <p class="flexbox"><img src="http://placehold.it/50x50" align="left" alt="" background:="" class="img-responsive" src="imgname" style="width: 50px; height: 50px; margin-left:10px; margin-right: 10px;" />Live event broadcasting</p>
      </td>
    </tr>
    <tr style="background: #f0f0f0;">
      <td colspan="3"><strong>Industry</strong></td>
    </tr>
    <tr>
      <td colspan="3">
        <p style="margin-left:10px;">Nonprofit</p>
      </td>
    </tr>

Upvotes: 2

Related Questions