Horizontal and vertical aligments for text and pictures

  • Resolved alfredhoogland

    (@alfredhoogland)


    10 years, 8 months ago

    Dear Tobias,

    I’m struggeling with some CSS code for the alignments of text and/or pictures (WP 3.6, Genesis theme). You can find my table-page here.

    What I’ve done is that the pictures are aligned vertical middle. Just perfect. But how can I add that the text must be aligned vertical too? And in row 3 (the first one with pictures) I’ve the pictures aligned in the middle (horizontal) but the rest of the rows have not.

    The CSS code for now is:

    .tablepress-id-3 img {
    margin: 0 auto !important;
    }

    .tablepress-id-3 .column-2 {
    vertical-align: middle;
    }

    .tablepress-id-3 .column-3 {
    vertical-align: middle;
    }

    .tablepress-id-3 .column-4 {
    vertical-align: middle;
    }

    .tablepress-id-3 .column-5 {
    vertical-align: middle;
    }

    .tablepress-id-3 .column-6 {
    vertical-align: middle;
    }

    .tablepress-id-3 .column-7 {
    vertical-align: middle;
    }

    .tablepress-id-3 .column-8 {
    vertical-align: middle;
    }

    Do you have any suggestions for me?

    http://wordpress.org/plugins/tablepress/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    10 years, 8 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    The reason for this is the method that you used to center the text in the head row and in the text rows, namely by wrapping them in <p> HTML tags. Those add more white space to the table, so that the vertical alignment is wrong.
    Therefore, I suggest that you remove all of those <p> tags and then use a CSS method to center the text in the cells.
    This should be all the CSS that you need then:

    .tablepress-id-3 thead th,
.tablepress-id-3 tbody td {
  text-align: center;
  vertical-align: middle;
}
.tablepress-id-3 .column-1 {
  text-align: left;
}

    Regards,
    Tobias

    Thread Starter alfredhoogland

    (@alfredhoogland)

    10 years, 8 months ago

    Hello Tobias,

    This is great! Thnx!

    The only thing for now: the first row with pictures (row no. 3) does not align in the center. Any idea why?

    Regards,

    Alfred

    Thread Starter alfredhoogland

    (@alfredhoogland)

    10 years, 8 months ago

    Hello Tobias,

    Never mind, this row had another link with separate alignment then the others rows!

    Thank you very much for your support.

    Regards,

    Alfred

    Plugin Author TobiasBg

    (@tobiasbg)

    10 years, 8 months ago

    Hi Alfred,

    No problem, you are very welcome!
    Good to hear that this helped! 🙂

    Best wishes,
    Tobias

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Horizontal and vertical aligments for text and pictures’ is closed to new replies.