Center text in a floating td

  • Resolved sscalifornia

    (@sscalifornia)


    11 years, 3 months ago

    I haven’t used tables too many times, in fact the only times that I’ve dealt with them is with your plugin, which is fantastic by the way.

    I have two columns which are floating apart from each other and I need them to have the text vertically centered on both but I can’t figure it out. I looked all through this forum and Google and the answers I find don’t seem to work for me.

    my css looks like this for these tables:

    td.column-1 {
	float: left;
	width: 357px;
	height: 140px;
	border: none !important;
	color: #2E3092;
	text-align: right !important;
	font-size: 18px;
	line-height: 120px;
	padding-right: 23px !important;
}
td.column-2 {
	float: right;
	width: 631px;
	height: 140px;
	padding: 20px 25px 0px 25px !important;
	font-size: 14px;
	color: #939597;
}
.tablepress .odd td {
    background-color: #e6e7e8 !important;

}
.tablepress .even td {
    background-color: #edecec !important;
	border: none !important;
}

    Any thoughts would be greatly appreciated. I’ve tried vertical-align: middle so many times to no avail, I just think I’m missing something.

    P.S This is the starting code I had with line-height on the first td and padding on the second td. I don’t want to use these, I’d rather just be able to center them vertically.

    https://www.ads-software.com/plugins/tablepress/

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

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    From what I can see, you are using float directly on the table cells. That’s not really a good idea, as that can cause weird behavior. Table cells are not really made to “float”. If you want that behavior, using <div> HTML elements is usually better.

    Now, to find some working code for you could you please post link to the page with the table, so that I can take a direct look?

    Regards,
    Tobias

    Thread Starter sscalifornia

    (@sscalifornia)

    Thanks for getting back to me. Yeah, like I said, I don’t have much experience using tables. Here’s the link

    I needed the two columns to be separated and tried float and it did the trick so I stuck with it. If there’s a better way to do that, I’m open to it. I tried vertical align without the floats and it still didn’t work. Thanks for looking at it.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for the link!

    Please replace the current “Custom CSS” (except for the .odd and .even code, that should stay) with this table specific CSS:

    .tablepress-id-1 {
	border-collapse: separate !important;
	border-spacing: 20px 0 !important;
}
.tablepress-id-1 .column-1 {
	width: 357px;
	height: 140px;
	font-size: 18px;
	color: #2E3092;
	text-align: right;
	vertical-align: middle;
	padding-right: 23px !important;
}
.tablepress-id-1 .column-2 {
	font-size: 14px;
	color: #939597;
	vertical-align: middle;
	padding: 20px 25px !important;
}

    The border spacing will create that separation, without needing to use float.

    Regards,
    Tobias

    Thread Starter sscalifornia

    (@sscalifornia)

    Wow! Thank you so much. This is just such an amazing plugin. I’m going to take you up on buying you a cup of coffee.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    no problem, you are very welcome! ?? Good to hear that this helped!
    And thanks for the donation, I really appreciate it!

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Center text in a floating td’ is closed to new replies.