center a table in a text box

**GK User** Fri Mar 13, 2015 8:55 pm

i've been trying to center a table on the page in a widget text box and nothing works. I specified it for a tablet but it always left justifies. I tried inline style as well as specifying a class .infographic and putting the following in the overide.css:

Code: Select all: .infographic { margin-left: auto; margin-right: auto; }

Help. Here is the code in the text widget box:

Code: Select all: <head> <style type="text/css">td img {display: block; text-align: center;}</style> </head> <body bgcolor="#ffffff" style="text-align:center;" class="infographic"> <div class="infographic"> <table class="infographic" align="center" style="display: inline-table; text-align: center;" bgcolor="#eaeaea" border="0" cellpadding="0" cellspacing="0" width="820"> <tr> <td colspan="4"><img name="InfographicRet820px_r1_c1" src="http://www.unexplainedinfertilityinfo.com/wp-content/themes/Simplicity/images/infographic/tablet_820px/images/Infographic-Ret820px_r1_c1.jpg" width="820" height="67" id="InfographicRet820px_r1_c1" alt="" /></td> <td><img src="http://www.unexplainedinfertilityinfo.com/wp-content/themes/Simplicity/images/infographic/tablet_820px/images/spacer.gif" width="1" height="67" alt="" /></td> </tr> <tr> <td><a href="http://visitor.r20.constantcontact.com/manage/optin?v=001BsnXZ3B2sYoqklk1ukSgYCQZRXEjPO8UxHg4MExZfnbAVkr31esJhqjDXon9LFmUShSRUN_BLDxDTbef1ILPTi9XepQTi7L3HTy0tq2S_S8DgLEqJz0xCzqOZ4x1zJgxuXZg5fEtiJtLFhXrleBf7j1FRd9KNJFrdJ-wozuuIuyRkyMgaIWaHA%3D%3D" target="_blank"><img name="InfographicRet820px_r2_c1" src="http://www.unexplainedinfertilityinfo.com/wp-content/themes/Simplicity/images/infographic/tablet_820px/images/Infographic-Ret820px_r2_c1.jpg" width="218" height="224" id="InfographicRet820px_r2_c1" alt="questionnaire" /></a></td> <td><a href="http://www.unexplainedinfertilityinfo.com/causes/" target="_blank"><img name="InfographicRet820px_r2_c2" src="http://www.unexplainedinfertilityinfo.com/wp-content/themes/Simplicity/images/infographic/tablet_820px/images/Infographic-Ret820px_r2_c2.jpg" width="192" height="224" id="InfographicRet820px_r2_c2" alt="conditions" /></a></td> <td><a href="http://www.unexplainedinfertilityinfo.com/causes/" target="_blank"><img name="InfographicRet820px_r2_c3" src="http://www.unexplainedinfertilityinfo.com/wp-content/themes/Simplicity/images/infographic/tablet_820px/images/Infographic-Ret820px_r2_c3.jpg" width="215" height="224" id="InfographicRet820px_r2_c3" alt="diet" /></a></td> <td><a href="http://www.unexplainedinfertilityinfo.com/product-category/lab-testing/" target="_blank"><img name="InfographicRet820px_r2_c4" src="http://www.unexplainedinfertilityinfo.com/wp-content/themes/Simplicity/images/infographic/tablet_820px/images/Infographic-Ret820px_r2_c4.jpg" width="195" height="224" id="InfographicRet820px_r2_c4" alt="lab" /></a></td> <td><img src="http://www.unexplainedinfertilityinfo.com/wp-content/themes/Simplicity/images/infographic/tablet_820px/images/spacer.gif" width="1" height="224" alt="" /></td> </tr> <tr> <td><a href="http://www.unexplainedinfertilityinfo.com/shop/" target="_blank"><img name="InfographicRet820px_r3_c1" src="http://www.unexplainedinfertilityinfo.com/wp-content/themes/Simplicity/images/infographic/tablet_820px/images/Infographic-Ret820px_r3_c1.jpg" width="218" height="235" id="InfographicRet820px_r3_c1" alt="nutritional" /></a></td> <td><a href="http://www.unexplainedinfertilityinfo.com/resources/" target="_blank"><img name="InfographicRet820px_r3_c2" src="http://www.unexplainedinfertilityinfo.com/wp-content/themes/Simplicity/images/infographic/tablet_820px/images/Infographic-Ret820px_r3_c2.jpg" width="192" height="235" id="InfographicRet820px_r3_c2" alt="practioner" /></a></td> <td><a href="http://www.unexplainedinfertilityinfo.com/articles/" target="_blank"><img name="InfographicRet820px_r3_c3" src="http://www.unexplainedinfertilityinfo.com/wp-content/themes/Simplicity/images/infographic/tablet_820px/images/Infographic-Ret820px_r3_c3.jpg" width="215" height="235" id="InfographicRet820px_r3_c3" alt="articles" /></a></td> <td><a href="http://www.unexplainedinfertilityinfo.com/community/" target="_blank"><img name="InfographicRet820px_r3_c4" src="http://www.unexplainedinfertilityinfo.com/wp-content/themes/Simplicity/images/infographic/tablet_820px/images/Infographic-Ret820px_r3_c4.jpg" width="195" height="235" id="InfographicRet820px_r3_c4" alt="community" /></a></td> <td><img src="http://www.unexplainedinfertilityinfo.com/wp-content/themes/Simplicity/images/infographic/tablet_820px/images/spacer.gif" width="1" height="235" alt="" /></td> </tr> </table> </div> </body> <div align="center"> <p> <h4> <a href="http://www.unexplainedinfertilityinfo.com/infographic/"> <i>Click here to see the expanded step-by-step infographic page</i></a> </h4> </p> </div>

**GK User** Mon Mar 16, 2015 8:21 am

Hello,

Could you provide a screenshot? I can see this table on your website, but I'm not sure which element exactly do you want to center? The table and texts inside are already centered.

**GK User** Mon Mar 16, 2015 12:55 pm

i figured it out. i had to put the text box in the main body widget area. i tried it in the 2 areas between the main body and the header area and no matter what I tried it wound't centre. However, the main body area would centre. don't know why.