CSS - Горизонтально центрирующий div в макете жидкости - PullRequest
Новая
       7

CSS - Горизонтально центрирующий div в макете жидкости

0 голосов
/ 12 февраля 2012

Все,

Уже более часа бьюсь головой об этом, и до сих пор не знаю, как решить этот, казалось бы, простой трюк:

Я хочу расположить центр по центру в моей жидкостной схеме.

Jsfiddle: http://jsfiddle.net/K26TN/

HTML код: 

<div id="menu_bars">
<div id="main_bar">
    <ul>
        <li id="overview_tab" class="maintabs">
           <div  id="text_overview_tab">Overview</div>
        </li>
        <li id="collar_tab" class="maintabs">
           <div id="text_collar_tab">Collar/ Neckline</div>
        </li>
        <li class="maintabs" id="body_tab">
           <div  id="text_body_tab" >Body</div>
        </li>
        <li id="sleeves_tab" class="maintabs">
           <div id="text_sleeves_tab" >Sleeves</div>
        </li>
    </ul>
</div>
</div>

КОД CSS: 

html {
height: 100%;
}

body#container {
position: relative;
width: 100%
min-width: 1280px;
height: 100%;
min-height: 700px;
background-color: rgba(255,255,255,0.8);
margin: 0 auto;
}

    #menu_bars {
    position: relative;
    width: 90%;
    height: 20%;
    margin: 0 auto;
}
        #main_bar {
        float: left;
        width: 78%;
        height: 100%;
    }
    #main_bar ul {
        float: left;
        display: table;
        width: 100%;
        height: 100%;
        border-radius: 6px;  
        vertical-align: middle;           
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        box-shadow: 0 1px 3px rgba(0,0,0,0.2);      
    }
        .maintabs {
            display: table-cell;
            width: 25%;
            height: 100%;
            list-style-type: none;
            cursor: pointer;
            vertical-align: middle;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(237,237,237))); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(237,237,237) 100%); /* Chrome10+,Safari5.1+ */
            background: linear-gradient(top, rgb(255,255,255) 0%,rgb(237,237,237) 100%); /* W3C */
        }
            .maintabs:first-child {
                border-top-left-radius: 6px;
                border-bottom-left-radius: 6px;                 }
            .maintabs:last-child {
                border-top-right-radius: 6px;
                border-bottom-right-radius: 6px;        
            }
            .maintabs div {
                display: table-cell;
                height: 100%;
                color: rgb(125,125,125);
                font-size: 0.8em;
                text-decoration: none;
                text-shadow: 0px 1px 2px rgba(150,150,150,0.4);
                -moz-transition: all 0.3s ease-in;
                -webkit-transition: all 0.3s ease-in;
                -o-transition: all 0.3s ease-in;
                transition: all 0.3s ease-in;
            }
            #overview_tab div{
                color: rgb(142,101,143);
                text-shadow: 0px 1px 1px rgba(248,248,248,1);
            }
                .maintabs div:hover {
                    color: rgb(153,112,154);
                    text-shadow: 1px 1px 0 rgba(255,255,255,0.95);
                }
...