Solved

align="center" versus CSS text-align:center for <div>

Posted on 2015-01-06
9
255 Views
Last Modified: 2015-01-13
We've been updating our site to replace the deprecated HTML tags with CSS.  Only issue I've found so far involves centering tables on the page.

Have a "table of tables" that contains 1 row and 2 columns.  Each column contains a table.  We want the main table to be centered left to right on the page while still allowing for varying widths as the two inner tables expand or contract horizontally with data changes.

To do this, we've placed the main table in a division.  While the deprecated <div align="center"> properly centers the main table on the page, using <div style="text-align:center"> does not.  The main table displays left-justified.

Reviewed several of the articles on EE, but none were an exact match and the solutions did not fix the issue.  (Maybe I just didn't go deep enough into the list.)

Have also tried:
<div style="text-align:center">
<div style="width:99%; text-align:center">
<div style="width:99%; margin-left:auto; margin-right:auto">
<div style="width:99%; margin-left:auto; margin-right:auto; text-align:center">
<div style="margin-left:auto; margin-right:auto">
<div style="margin-left:auto; margin-right:auto; text-align:center">

as well all sorts of combinations of float and text-align on both the main and inner tables.
None of these work, but the simple <div align="center"> does work.

What is the proper way to remove the deprecated tag and get the main table to center on the page?

Thanks!

Current abbreviated code (this works):

<div align="center">
      <table id="ccTable" style="margin-top:20px">
          <tr>
              <td style="vertical-align:top">
                  <table>
                        ...
                  </table>
              </td>
              <td style="vertical-align:top">
                  <table>
                        ...
                  </table>
              </td>
          </tr>
      </table>
</div>
0
Comment
Question by:springthorpeSoftware
  • 4
  • 3
  • 2
9 Comments
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 500 total points
Comment Utility
I typically start a page that has centered content by making everything margin:0 auto and setting text-align:center on the body. The div wrapper is not essential. The rest of the css is adjusted as needed for style.

Example:

<style>
  * { margin:0 auto; padding: 0 }
  body { text-align: center }
  #ccTable { max-width:800px; margin-top:20px; text-align:left }
  th { text-align:center }
  td { vertical-align:top; padding:5px }
</style>

<table id="ccTable">
          <tr>
              <td>
                  <table>
                        <thead>
                              <th>Header 1</th>                            
                              <th>Header 2</th>
                        </thead>
                        <tbody>
                              <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </td>
                            <td>aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
                        </tbody>
                  </table>
              </td>
              <td>
                  <table>
                        <thead>
                              <th>Header 3</th>                            
                              <th>Header 4</th>
                        </thead>
                        <tbody>
                              <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut </td>
                            <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td>
                        </tbody>
                  </table>
              </td>
          </tr>
      </table>
0
 

Author Comment

by:springthorpeSoftware
Comment Utility
Thanks, Tom, for responding but your suggestion didn't work.  The main table went back to the left.
Bruce
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
Okay, let's see what we are doing differently. I'm testing in Firefox and Chrome, latest versions.

Here's a fiddle to play with. Be sure you have the result window wide enough to see the left and right margins.

http://jsfiddle.net/rbp9m19z/
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
It would make thing easier if you posted a link to the page.  I suspect the problem is related to the fact you are using nested table (a 20th century technique) such structures are difficult to manage without the obsolete attributes which is why they are generally not used in modern design and development.

Cd&
0
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 

Accepted Solution

by:
springthorpeSoftware earned 0 total points
Comment Utility
Thanks, guys, for the input.  Found the basis of the solution here:
http://stackoverflow.com/questions/346940/two-html-tables-side-by-side-centered-on-the-page

The keys to making it work:
1. body { text-align: center }
2. div { width:99%; margin-left:auto; margin-right:auto; overflow:hidden }
3. table { display:inline-block }
4. NO floats.  They screw everything up.

Works like a charm in Firefox.  Haven't tested yet in IE, Chrome, or Safari.  Will advise of any problems there.

Other notes:
<div style="text-align: center"> is useless for block-type elements.  Must use full width and "auto" margins left and right if centering on the page.
vertical-align must be on individual tables, not the container <div>.
If space needed between content above and top-aligned tables, put margin-top in the <div>.

Tom, thanks for pointing out the body { text-align: center }.  It was one of the keys and won't work without it.

COBOLdinosaur, if your moniker really reflects who you are, we're probably about the same age.  (How old is dirt, anyway?  Probably about the same age as the COBOL code I wrote in the 80's.) IMHO, tables are still beneficial, but I'm prejudiced.  (I learned on HTML tables and they're what I'm comfortable with and can code them a lot more quickly than CSS tables.)  

From my experience, proper use of CSS in style sheets, overridden by what is on individual pages and controls, supplements the tables and yields the benefits I need: fast coding and easy color/font/background changes.  Plus, this particular site is a true "data" site (well over a terabyte in the db) with tons of grid-type displays.  It's just better, to me, to keep everything fairly consistent.  (Thus, the tables on non-grid pages.)  I'm sure that, eventually, some of kids around here will change it over to full CSS.

Best to all,
Bruce
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
>>> Probably about the same age as the COBOL code I wrote in the 80...

Actually I started with assembler 50 years ago (yes they had computers in the 60s).  If you did COBOL in the 80s then you were late to the party using either COBOL80 or COBOL74.  I was doing it with COBOL68, and its root (pre-standardized by Grace Hopper) autocoder.

Using tables for layout management in the 21st century is like using COBOL74 in a modern environment.  The learning curve to do full separation of content and presentation with CSS is quite small and my experience has been that after a couple of weeks the productivity starts to increase to a peak of about 30%. I can still do assembler; and I like assembler, but modern tools combined with an understanding  of what is happening at the primitive level keeps me ahead of the kids who are a third my age.

Since I retired I only put in 15-20 hours a week but I put out more work then the kids putting in a full week; but I'm the boss so I get to pick what I want to work on.

Cd&
0
 

Author Comment

by:springthorpeSoftware
Comment Utility
Dino,

Looks like you've got me by a few years.  Started in 1980 with COBOL74 on a IBM 360-138.  No disks - tape IPL.  Also wrote in BAL for that box.  (Does anybody still use EBCDIC?)  More horsepower in my phone now, by a long shot, than in that box.
 
Will dedicate some time to learning the CSS tables.  Any suggested reading?

Thanks for the input, by the way.
Bruce
0
 

Author Closing Comment

by:springthorpeSoftware
Comment Utility
Did further research elsewhere, tested and it works.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
from the sound of it you have enough understanding of basic concepts that you don't need the kindergarten level tutorials

If you explore the MDN CSS area you will probably be surprised how much you learn with not much effort.

Cd&
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now