Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Vertically center all table elements

How can I vertically center all elements in my CBC task tables in Sawtooth 8.4.8? I'd even be happy if I could vertically center one element. I tried many different approaches with no look (see below).

<img src="[%GraphicsPath()%]brand.jpg" alt="" border="0">

This was my original cell element. It was aligned to the top, by default.

<img src="[%GraphicsPath()%]brand.jpg" alt="" border="0" style="vertical-align:middle">

Still aligned to top

<tr valign="middle"><img src="[%GraphicsPath()%]brand.jpg" alt="" border="0"> </tr>

Completely screwed up alignment

<td valign="middle"><img src="[%GraphicsPath()%]brand.jpg" alt="" border="0"> </td>

Moved the brand one cell to the right. Nothing appears in the cell that it's supposed to. But it is vertically centered!

<div style="display:table-cell; vertical-align:middle"> <img src="[%GraphicsPath()%]brand.jpg" alt="" border="0"></div>

This didn't appear to do anything.
asked Nov 2, 2017 by ertingen Bronze (615 points)

1 Answer

+1 vote
Best answer
Vertical alignment is often a tricky problem in CSS.  As you've seen, there are a number of conflicting ways to do it, many of which only work in specific situations.  For your situation, I believe you're best off not adding any additional HTML to the level items themselves; instead, add this CSS to the CBC:

.cbc .inner_table td {
    vertical-align: middle;
answered Nov 2, 2017 by Zachary Platinum Sawtooth Software, Inc. (148,025 points)
selected Nov 2, 2017 by ertingen
Fantastic! To provide extra detail for newcomers: go to CBC Exercise Settings > Question Text > enter this CSS into any of Header 1 Header 2 or Footer text boxes.