[Miscommunication] How do you center non-tables?

HTML & CSS
1

I was told I cant use this code to center non-tables in the middle, if that’s the case, what’s the proper way of doing it. thank you.

Examples of things I want to use it for:

One way:
http://www.cssdesk.com/C3veS

Another way:
http://www.cssdesk.com/JPabe

html,body {
    height:100%;
    padding:0;
    margin:0;
}
.outer {
    display:table;
    height:100%;
    margin:0 auto; 
}
.tcell {
    display:table-cell;
    vertical-align:middle;
}

   <div class="outer">
      <div class="tcell">

    <div onclick='thevid=document.getElementById(&apos;thevideo&apos;); thevid.style.display=&apos;block&apos;; this.style.display=&apos;none&apos;; document.getElementById(&apos;iframe&apos;).src = document.getElementById(&apos;iframe&apos;).src.replace(&apos;autoplay=0&apos;,&apos;autoplay=1&apos;);' style='width:650px'>

    <img src='' style='display:inline-block; cursor: pointer; width: 640px; height: 390px;background-color: black; border-radius:50px
    ; border: 5px solid #5CB378;&apos;'/>
    </div>

    <div id='thevideo' style='display: none;'>
    <iframe allowScriptAccess='always' allowfullscreen='false' frameborder='0' height='340' id='iframe' src='https://www.youtube.com/embed/?rel=0&amp;start=20&amp;disablekb=1&amp;vq=medium&amp;showinfo=0&amp;controls=1&amp;autoplay=0&amp;iv_load_policy=3&amp;fs=0&amp;wmode=transparent' style='background-color:#000000;width: 640px; height: 390px; cursor: pointer; border-radius:50px; border: 5px solid #5CB378;' width='650'/>
    </div>
          </div>
        </div>
      </div>
    </div>
2

What was the reason given that you cannot use this code to center non-tables in the middle?

Were you offered any methods that work? or just told what won’t work?

3

I thought what you wrote here meant it wasn’t proper to use it for this.

4

Can you tell me why border collapse isn’t working on this and how I can fix that?

http://www.cssdesk.com/uEHaG
http://liveweave.com/qJTzu5

5

I just figured it out, I’ll do it later. https://jsfiddle.net/7ymfguj5/7/

6

To use what for what??? Please describe what the “its” and “this’” are, please.

I wrote that the negative margin-top (from the non-table code) is of no value in the table code. And I advised against trying to mix and match properties between layout methods, especially between non-table tag and table tag methods.

You seem to have misunderstood what was said.

1 Like
7

how is it of value in the non-table then?

8

In the non-table element code, the tables are three independent rows, not just one table with three rows of cells. The negative margin-top raises the lower two tables 1px each so the top and bottom blue borders overlap giving the appearance of a 1px border between the tables. That is easier than assigning 1px borders selectively to give the appearance of a table with {border-collapse:collapse}.

It would never be applied to the table because the CSS code is written to target all tables AFTER the first table and in the HTML table design there is only one table at any level.

FYI:
One cannot apply margins to table cells or HTML table rows.

2 Likes
9

Why is there a space 4 blocks down? I can’t figure it out.

but then when I remove the extra div it messes everything up.

10

Can you wait while I copy the code from jsfiddle into a working page so I can see how it works?

12

I fixed it: https://jsfiddle.net/192p75vh/7/

13

What do I do about this: Error parsing XML, line 1262, column 3: The element type "div" must be terminated by the matching end-tag "</div> After I tried putting that code into blogger.

697×300 9.48 KB

14

I fixed it, I was missing a div tag.

15

The width of the cells seem to be uneven.

I suggest that you move {width:300px} from the anchor to .inner .tcell {width:300px}

That will still leave one or two cells that are too wide, but that is happening because the test cannot wrap.

16

I fixed it, it’s right here: http://newtest180.blogspot.com/

17

vertical-align: should be top and not center right? cause there’s no such thing?
only choices are: top|middle|bottom|baseline

18

Please read my last post again…

This is what I see on my screen at 100% font size (not zoomed).

1387×707 48.6 KB

You really should allow the text to wrap.
You could reduce the size of the text a small amount.
You might reduce the amount of left and right padding within the cell from 50px to 40px and add that changed amount to the width of the cell.
i.e.
padding left and right down from 50px to 40px.
width of cell increased from 300px to 320px.

19

Which selector is it in?

The outer table cell should be vertical-align:middle.
The inner table cells should be vertical-align:top (or middle, whichever you prefer). If you allow the text to wrap, vertical-align:middle for all cells would probably look the best. Try it for yourself and decide.

20

FWIW: when I was looking at your code, I found two extra </div> tags. I did not find that any were missing.

21

This is what I see: http://newtest180.blogspot.com/
http://i.imgur.com/K8nbNvX.png