[Miscommunication] How do you center non-tables?

.tcell {
display: table-cell;
vertical-align: top;
.inner .tcell {
vertical-align: top;
border: 1px solid blue;

That first .tcell should be vertical-align:middle. That is part of the mechanism that centers the content in the window when there are only a few rows.

Does my page still look like that, all messed up?

I don’t want it, or need it in the middle, not for this one.

Set it to middle anyway (it won’t matter on long pages) and you will have it at the ready for short pages. :slight_smile:

You are using a different font on your PC than I am, so my view is different than yours. This is a user’s choice that you cannot reliably control. You can use web sourced fonts and feed them to the user which will give you more control over what they see, but you cannot limit the size of their font. Some people need larger fonts to compensate for poor vision so they increase their default font size.

Yes, I still see the text in the cells taking up more width that they do on your computer.

font, what do you mean, I don’t have any set fonts?

What kind of computer and browser are you using?

firefox latest version and internet explorer 11

Here’s one from Browsershots: Chrome 51.0.2704.79 / Debian Testing (Lenny)

The font being used in your screen shot appeas to be Times New Roman or equivalent and the size must be either average or around 14 or 15 in Firefox.

I have my FF set to use Verdana as the default font at a size of 16. Verdana is a sans-serif font with a heavier build than Times. 16 is only 1 increment larger than 15 which is the default if FF.

Whatever is default in firefox cause I’ve never changed fonts or any of that stuff.

Times New Roman at size 15 is the default in FF, but I find that hard to read so I’ve always used Verdana at size 16 (“always” for as long as I can remember, anyway :slight_smile: )

A coder has to remember that the user’s browser, screen, and font is probably not just like his.

When I zoom in and out the appearance doesn’t change.

Using Firefox, go to the View menu item and select Zoom > Zoom Text Only. This will allow you to simulate how your web page might appear on the computer of a user who is using a different font size than you are.

You can change the font size by pressing the control key and using the mouse wheel.
Control 0 (zero) returns the font size to the default.

1 Like

Zooming in twice messes everything up.

1 Like

Coders usually plan ways to accommodate larger font sizes, such as by allowing fonts to wrap.

The sometimes use boxes (table-cells in this case) that will increase in size as the font size changes, If course, that means that the page may not be restricted to a fixed 1200px width. It might need to be able to stretch a bit wider as needed.

There are other choices, too.

Can you figure out something for me.

On here the font wraps.

On here the font doesn’t wrap.

Can you tell me why this is?

Yes, Test180 is using an HTML table without a vertical centering mechanism. The width of the table is being determined by the sum of the widest table-cells in each column. All three columns are not equal width (the center column is wider than the other two). All rows are of equal width because it is one continuous table.

Table cells don’t work the same as html tables?