Cannot vertically center table cell elements in Weaver Theme

  • Resolved unexpected_kangaroo

    (@unexpected_kangaroo)


    10 years, 5 months ago

    Hello!

    I’m making a nonpartisan voter education website. I wanted to create a two column table where one color has a politician’s name and office (e.g. Barack Obama, President) and the other column has pictures of the politician. First I used TinyMCE to make the table. I tried to vertically center the text, but the theme keeps overiding it. I even learned some css table creation, and pasted in one of their tables. In the preview it’s fine, but uploaded it gets over-ridden and pushed to the top of the cell.

    Here’s a page where I have the table from a css teaching website.

    http://www.proofthroughthenight.org/courses/politicsforpower/p14/

    I know where to find the master css file in weaver administration, but I probably don’t want to change things at that level, since it’s only one table. I have used other tables with just one cell, to create a colored background, and I don’t want the content of all those tables centered.

    I am spotty on css, only spending about an 1.5 hours skimming the basics and trying out things.

    THANK YOU!

Viewing 4 replies - 1 through 4 (of 4 total)
  • WPyogi

    (@wpyogi)

    10 years, 5 months ago

    Try adding this here – that appears to be custom CSS that you’ve added?

    td {
    height: 150px;
    vertical-align: middle;
}

    Thread Starter unexpected_kangaroo

    (@unexpected_kangaroo)

    10 years, 5 months ago

    Hi WPyogi,

    I had code almost identical to that code in the table. But I erased mine and inserted yours. As before, it worked in the preview, centering the text. But when I saved and viewed it, the text was raised to “top’ position in all cells.

    I believe that WP or the Weaver theme is somehow overriding the commands in the page. Really, the table made with the css commands was just a test table. I also made a table with tinyMCE and its commands were also over-ridden by something else. But below is the code for the table that’s on the sample page:

    http://www.proofthroughthenight.org/courses/politicsforpower/p14/

    [ Code block corrected. Please use the backtick and not single quote. ]

    <p> </p>
<style><!--
table, td, th
{
border:1px solid black;
}
td {
    height: 150px;
    vertical-align: center;
}
--></style>
<p> </p>
<p> </p>
<table>
<tbody>
<tr><th>Firstname</th><th>Lastname</th><th>Savings</th></tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</tbody>
</table>
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 5 months ago

    Try using WPYogi’s code again, she used “middle” and not “center”.

    Thread Starter unexpected_kangaroo

    (@unexpected_kangaroo)

    10 years, 5 months ago

    Thanks, Andrew Nevins! (And WPyogi) — That did it!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Cannot vertically center table cell elements in Weaver Theme’ is closed to new replies.