Вопрос по css-tables, css, vertical-alignment – Выровнять по вертикали с абсолютным позиционированием

2

В следующем коде яя пытаюсь сделать так, чтобы элементы в зеленых элементах div.middle были вертикально выровнены по центру.

Мы пробовали подход с использованием табличных ячеек, но не могу заставить его работать Я слышал этоs из-за абсолютного позиционирования и попробовал это решение без удачи:CSS - вертикальное выравнивание ячеек таблицыт работа с абсолютной позицией

Похоже, это связано с тем, что у .table-cell нет высоты - мне бы этого хотелосьВысота s равна его родительскому контейнеру, который изменяется по высоте.

jsfiddle:

http://jsfiddle.net/q5jKM/1/

Кто-нибудь знает способ заставить зеленые элементы div.middle вертикально выровнять по центру? Подойдет любой метод. Он просто должен уметь работать с переменной высотой. Это возможно только с CSS? Или мне придётся подключиться с небольшим количеством jQuery?

Редактировать:

выровнять такжеЭто жизнеспособное решение благодаря поддержке браузера и замене новым стандартом.

CSS

     html,body{height:100%;margin:0}
#sidebar {
    width: 22em;
    position:fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index:2;
    color: #ffffff;
    background-color: #333333;  
    overflow:auto;
    height: 100%;
}

#sidebar .nav {
    width: 3em;
    float: right;
    background-color: #2e2e2e;
    border-left: 2px groove #454545;
    height: 100%;
    position:relative;
    min-height:34em;    
}

#sidebar .content {
    height: 100%; 
    width: 16.875em; /*    17-(2/16)   - 20em - .nav - nav border*/
    float:left; 
    position:relative;
    min-height:34em;
}

#sidebar .top {
    position:absolute;
    top:0;
}
#sidebar .bottom {
    position:absolute;
    bottom:0;
}

#sidebar .middle {
    position: absolute;
    bottom: 12em;       /*  3.125*3  */
    top: 16em;          /*  3.125*4  */
    background: green;
}

.content .middle {
    overflow:auto;
}


#sidebar .content > div {width: 16.875em; } /*.top .middle .bottom*/
#sidebar .nav > div {width:3em; } /*.top .middle .bottom*/


    /*table-cell trying get vertical-align working*/
#sidebar .table-cell {display:table-cell; vertical-align: middle; }



#sidebar .content p, #sidebar .content li, #sidebar .content img {font-size: .75em; color: #dddddd;}

#sidebar ul {margin:0; padding: 0;}









#sidebar .nav li {
    padding: .5625em;
    list-style:none;
}
#sidebar .nav li img {
    height: 1.875em;
    width: 1.875em
}

#sidebar .nav .top li { border-bottom: 2px groove #454545 }
#sidebar .nav .bottom li { border-top:  2px groove #454545 }




.content li {
    position:relative;
    display:block;
    background-color: #444;
    padding: .72em;
    border-radius: .8em;
    border-bottom: 1px solid #292929;
    border-top: 1px solid #4c4c4c;
    text-align: center;
    font-size: 1em;
    letter-spacing: .1em;
    font-weight: normal;
    height: 1.2em;
}

.content li:after {
    content:"";
    position:absolute;
    display:block; 
    width:0;
    top:.11em; /* controls vertical position */
    right:-.852em; /* value = - border-left-width - border-right-width */
    border-style:solid;
    border-width:1.2em 0 1.2em 1.2em;
    border-color:transparent #444;
}

.content .top li{margin: .95em 0 1.9em 0;}
.content .bottom li{margin: 1.9em 0 .95em 0;}

.content .logo {
    text-align: center;
    padding: 1em 0 2em 0;
    width: 100%;
    border-bottom: 2px groove #454545;
}
.content p.welcome {
    text-align: center;
    line-height: 1.5em;
    margin: 1em 0;
}

HTML




            
            
            
                <img src="_images/attributes/attribute2.svg">
                <img src="_images/attributes/attribute2.svg">
                <img src="_images/attributes/attribute2.svg">
                <img src="_images/attributes/attribute2.svg">
            
            
            <p>test</p>
            
            
                <img src="_images/attributes/attribute2.svg">
                <img src="_images/attributes/attribute2.svg">
                <img src="_images/attributes/attribute2.svg">
            
            
            



            
                
                
                    SIDEBAR LINK
                    SIDEBAR LINK
                    SIDEBAR LINK
                    SIDEBAR LINK
                
                
                
                <img src="_images/g.svg">
                <p class="welcome">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum tellus viverra neque bibendum in mattis ante dignissim. Nam mattis feugiat lorem porttitor adipiscing. Aliquam erat volutpat. Nunc feugiat magna vitae mauris egestas euismod. In hac habitasse platea dictumst. Praesent magna sem, malesuada non fermentum vel, luctus quis mauris. Duis quam purus, ornare vitae eleifend sed, malesuada eget libero. Phasellus sed lorem risus, nec placerat urna. In magna turpis, accumsan ac egestas quis, dictum vel massa. Nulla vitae magna arcu. Maecenas sit amet vestibulum urna. Integer feugiat dignissim leo sed ornare. Maecenas auctor ultricies dui, pulvinar tincidunt velit feugiat quis. Sed egestas ornare elit, et fringilla quam viverra ut.</p>
                
                
                
                    SIDEBAR LINK
                    SIDEBAR LINK
                    SIDEBAR LINK
                
                
                
    

Ваш Ответ

3   ответа
2

Вы можете установить высоту для этой ячейки таблицы.

.table-cell{
height: 200px;/* for example */
vertical-align: middle;
display: table-cell;}

<div class="middle"><div class="table-cell"><p>test</p></div></div>
Хм ... эта ячейка имеет переменную высоту - это способ заставить ее расшириться до полной высоты 'контейнер? Ryan King
1

склонен понимать, что это свойство больше подходит для таблиц. Поэтому я добавил это в ваш код на JSFiddle, и это выглядело хорошо для меня. Можете ли вы увидеть, будет ли это работать с вами?

            <div class="middle">
                <table height="100%" width="100%">
                    <tbody><tr>
                        <td style="vertical-align:middle">
                            <p>test</p>
                        </td>
                    </tr>
                </tbody></table>
            </div>
Спасибо, это работает довольно хорошо, но я думаю, чтоЯ передам ответ Аю, так как их код соответствует тому, что у меня уже есть. Спасибо! Ryan King
7

display:table а такжеheight:100% в.table-cell это исправлю

Таким образом, структура HTML будет:

   <div class="middle">
        <div class="table">
           <div class="table-cell">
               <p>test</p>
           </div>
        </div>    
  </div>

добавить этот стиль:

#sidebar .table{
   display:table;
   height:100%;
}

Увидетьjsfiddle Я модифицировал

Круто, работает угощение. Ryan King

Похожие вопросы