Link to home
Start Free TrialLog in
Avatar of Miguel Quintana
Miguel Quintana

asked on

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
Avatar of David S.
David S.
Flag of United States of America image

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.
Avatar of Miguel Quintana
Miguel Quintana

ASKER

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
ASKER CERTIFIED SOLUTION
Avatar of Prasadh Baapaat
Prasadh Baapaat
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial