Блог

Главная - Вопросы по программированию - Как установить div и текст в вертикальную середину родительского элемента

Как установить div и текст в вертикальную середину родительского элемента

#html #css

#HTML #css

Вопрос:

У меня есть два divs, которые он содержит в родительском div. первый div слева, а второй справа. Итак, я хочу, чтобы правый div находился в середине родительского элемента без использования поля.

HTML

 <div class="clearfix" style="background-color: #CCCCCC;">
   <div style="padding: 10px; background-color: #0099FF;" class="inline-block">
        <div class="inline-block"><div>Post</div><div>139</div></div>
        <div class="inline-block"><div>Following</div><div>139</div></div>
        <div class="inline-block"><div>Followers</div><div>139</div></div>
     </div>
     <div class="rfloat" style="background-color: #00FF66; display: table-cell; vertical-align: middle;">
          <a href="#">Follow</a>
          <a href="#">Message</a>
          <a href="#">Report</a>
      </div>
</div>

CSS

 .inline-block {
    display: inline-block;
}
.rfloat {
    float: right;
}
.lfloat {
    float: left;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}
.clearfix:after {
  clear: both;
}

и вот jsfiddle http://jsfiddle.net/fmr3Y /

Комментарии:

1. В этом случае измените структуру с базы Div на базу таблицы

Ответ №1:

Вот как вы можете это сделать

ДЕМОНСТРАЦИЯ

HTML

 <div class="rfloat" style="background-color: #00FF66; display: table; height: 60px">

CSS 

  a {
    display: table-cell;
    vertical-align: middle;
    }

Ответ №2:

Используйте отображение: таблица — демонстрация

 <div class="clearfix" style="background-color: #CCCCCC; display:table;width:100%;">
        <div style="padding: 10px; background-color: #0099FF;" class="inline-block">
            <div class="inline-block">
                <div>Post</div>
                <div>139</div>
            </div>
            <div class="inline-block">
                <div>Following</div>
                <div>139</div>
            </div>
            <div class="inline-block">
                <div>Followers</div>
                <div>139</div>
            </div>
        </div>
        <div class="ss" style="background-color: #00FF66; display: table-cell; vertical-align: middle;"> <a href="#">Report</a>
     <a href="#">Message</a>
     <a href="#">Follow</a>

        </div>
    </div>

Ответ №3:

Вы могли бы имитировать гибкое выравнивание содержимого с помощью отображения и выравнивания по тексту: выравнивание по ширине: ДЕМОНСТРАЦИЯ

 .inline-block {
    display: inline-block;
    font-size:16px;/* do not forget to reset font-size to childs*/
    font-size:1rem;
    text-align:center;/* left, right, .. */
}

.justify:after {
  display: inline-table;
  content: " ";
    width:100%;
    height:0;
    vertical-align:top;/* no extra gap please */
}
.justify {
  text-align:justify;/* will span element from one side to the other */
    font-size:0;/* reduce line-height and avoid gap from pseudo element */
}

HTML обновлен с именем класса : 

 <div class="justify" style="background-color: #CCCCCC;">
   <div style="padding: 10px; background-color: #0099FF;vertical-align: middle;" class="inline-block">
        <div class="inline-block"><div>Post</div><div>139</div></div>
        <div class="inline-block"><div>Following</div><div>139</div></div>
        <div class="inline-block"><div>Followers</div><div>139</div></div>
     </div>
     <div class="inline-block" style="background-color: #00FF66; vertical-align: middle;">
          <a href="#">Follow</a>
          <a href="#">Message</a>
          <a href="#">Report</a>
      </div>
</div>

Ответ №4:

Я изменил вашу структуру, чтобы сделать правильный Div в центре

 <table class="clearfix" style="background-color: #CCCCCC; width: 100%;text-align: center; ">
        <colgroup>
            <col style="width: 19%"/>
            <col style="width: 75%"/>
        </colgroup>
        <tr>
            <td>
                <div style="padding: 10px; background-color: #0099FF;" class="inline-block">
                    <div class="inline-block">
                        <div>Post</div>
                        <div>139</div>
                    </div>
                    <div class="inline-block">
                        <div>Following</div>
                        <div>139</div>
                    </div>
                    <div class="inline-block">
                        <div>Followers</div>
                        <div>139</div>
                    </div>
                </div>
            </td>
            <td>
                <div  style="background-color: #00FF66; vertical-align: middle;">
                    <a href="#">Follow</a>
                    <a href="#">Message</a>
                    <a href="#">Report</a>
                </div>
            </td>
        </tr>
    </table>

Здесь тоже есть рабочая демонстрация.Рабочая скрипка