Center text in a floating td

Resolved sscalifornia
(@sscalifornia)

10 years, 8 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.

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

Viewing 5 replies - 1 through 5 (of 5 total)

Plugin Author TobiasBg
(@tobiasbg)

10 years, 8 months ago

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)

10 years, 8 months ago

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)

10 years, 8 months ago
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)

10 years, 8 months ago

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)

10 years, 8 months ago

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.