CODEWITHSUNDEEP
htmlcss
Valip
Valip

Reputation: 4620

How to vertically aling div in table cell

Does someone knows how can I vertically align a div inside a td ? I tried to use vertical-align:middle, but without any results.

There are already some other questions with the same problem, but they don't provide a solution for my case.

In my below example I need to vertically align the div with class thread inside the td. This need to be done without using magic numbers (fixed height or line-height values) and I couldn't find a solution for doing this...

JSFIDDLE

HTML:

<table>
  <tbody>
    <td class="thread-title">
        <div class="rating">
          <div class="positive_votes">
            <span class="bz-icon" title="Upvote this thread">
            </span>
          </div>
          <span class="score">1</span>
          <div class="negative_votes ">
            <span class="bz-icon" title="Downvote this thread">
            </span>
          </div>

        </div>
        <div class="thread">
          <span><a class="title ">thhhhhhhhhhhhhhrrrrrrrrrrrrrrrrrrr</a></span>
        </div>
    </td>
  </tbody>
</table>

CSS:

.positive_votes, .negative_votes {
  width: 15px;
  height: 15px;
  background-color:blue;
}
.rating {
  margin-right: 5px;
  float: left;
}
.thread {
  display:inline-block;
}

Upvotes: 1

Views: 68

Answers (2)

Gene R
Gene R

Reputation: 3744

Add display:inline-block; and vertical-align:middle; to both divs and remove float: left; from .rating:

.rating {
  margin-right: 5px;
  display:inline-block;
  vertical-align:middle;
}
.thread {
  display:inline-block;
  vertical-align:middle;
}

https://jsfiddle.net/zg9qtunk/3/

Upvotes: 0

Niels Steenbeek
Niels Steenbeek

Reputation: 4834

position: relative;
transform: translateY(-50%);
top: 50%;

Upvotes: 2

Related Questions