Struggling to center a price table

Hello,

I'm trying to center this table, but there is no way.  Used align center and margin 0 auto

please check the URL in the attachments
100.jpg
101.jpg
Miguel QuintanaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
You expect us to diagnose your issue based on just two screenshots, each showing only a single style rule?  Those two rules aren't even the important ones. We need to see the rules for the <dl>s and their parent <div>.

Why do you call it a table and yet not use a <table> to mark it up? Table elements should be used when appropriate. Based on what's shown in the screen shots, I would likely mark that up as a 3x3 table with the cells of the 3rd row each containing a <ul>. Or perhaps you are using <dl> elements because they're much easier to adapt to smartphone screens?

P.S. Only <dt> and <dd> elements may be children of a <dl>. Use CSS to create spacing.
0
Miguel QuintanaAuthor Commented:
Well, is a "Definition List" not a table ;)

As this is a Joomla template we bought is quite difficult and time consuming to change the code

And yes, this scheme is needed to render also for smartphones..  Probably that can be the reason they used DL instead a table.  They also have a cool effect when you scroll down each DT appears one by one


----------    PARENT ELEMENT:   ---------   (<div style="text-align: center;">)

elemento {
    text-align: center;
}
.box {
    font-size: 13px;
    line-height: 1.6;
}
body, html, body button, body input, body select, body textarea {
    font-family: "Open Sans",Arial,sans-serif;
}
body {
    color: #666;
    font-weight: 400;
    word-wrap: break-word;
}

-----------   CONTAINER  ------------


.gkPriceTable {
    padding: 60px 0px 48px;
}
elemento {
    text-align: center;
}
.box {
    font-size: 13px;
    line-height: 1.6;
}
body, html, body button, body input, body select, body textarea {
    font-family: "Open Sans",Arial,sans-serif;
}
body {
    color: #666;
    font-weight: 400;
    word-wrap: break-word;
}
html, button, input, select, textarea {
    font-family: sans-serif;
}
html {
    font-size: 100%;
}



------------  CHILDREN  -------------  DIRECTORY LISTS

.gkPriceTableAnimated dl.loaded {
    transform: scale(1);
}
.gkPriceTable.col3 dl {
    float: left;
    width: 20%;
}
.gkPriceTableAnimated dl {
   transition: transform 0.6s ease 0s;
}
.gkPriceTable dl {
    background: #FFF none repeat scroll 0% 0%;
    border: 1px solid #DDD;
    box-sizing: border-box;
    margin-left: -1px;
    padding: 14px;
}
elemento {
    text-align: center;
}
.box {
    font-size: 13px;
    line-height: 1.6;
}
body, html, body button, body input, body select, body textarea {
    font-family: "Open Sans",Arial,sans-serif;
}
body {
    color: #666;  
    font-weight: 400;
    word-wrap: break-word;
}

By this URL you could inspect these 3 elements..  These definition lists are located at the bottom of the page
0
Prasadh BaapaatWeb Designer & DeveloperCommented:
Hi Miguel,
Kravimir Rightly pointed out... its very difficult to guess the solution to problem from screenshots...

Anyways, I feel that the below float:left is making the Tables align to left side.
.gkPriceTable.col3 dl {
    float: left;
    width: 20%;
}

Open in new window

you can delete that line from CSS or add the below code at end of CSS  if its still not working:
.gkPriceTable.col3 dl {
    float: none !important;
    width: 20%;
}

Open in new window

Try it and let me know :)
thanks,
Prasadh
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.