Выравнивание текста по центру, по центру изображения - с автоматической высотой строки

0

вот скрипка:

<div style="background-color: yellow;">
    <div style="background-color: red; float: left;">1</div>
    <div style="background-color: green; float: left;"><img src="http://static.idokep.hu/images/nagyelore/ujikon2/030.png" width="108" height="50" /></div>
</div>

http://jsfiddle.net/LgyjZ/

Я знаю, что цель может быть достигнута путем добавления "line-height: 50" к первому div (не сделанному в скрипке). Но давайте предположим, что я могу многократно изменять высоту, и я тоже не хочу устанавливать линейный контур. Это может быть как-то на 100%?

  • 1
    Скрипка пуста.
  • 0
    пожалуйста, сохраните скрипку, а затем дайте URL
Показать ещё 2 комментария
Теги:

2 ответа

1
Лучший ответ
  1. Если вы хотите сохранить текущую структуру html, измените свойство "display" для всех divs - обертку и два контейнера и отмените их свойство "float".

http://jsfiddle.net/P4LxQ/1/

  #wrapper {
    display:table-row;   
}

 #text {
    display:table-cell;
    float:none !important;
    height:100px;
   vertical-align:middle;    
 }

 #pic {
    display:table-cell;
    float:none !important;    
    vertical-align:middle;
 }
  1. если необходимо сохранить поплавковое поведение divs, это можно сделать только с помощью javascript, который будет регулировать высоту и высоту строки div с текстом.

http://jsfiddle.net/U9m96/

 $(document).ready(function() {
    var picHeight =  $("#pic").outerHeight();
    $("#text").css({"height": picHeight, "line-height":picHeight+"px"}); 
 });
3

Вам нужно добавить vertical-align: middle. Немного изменилась структура:

.text {
    background-color: red;
    display: inline;
    vertical-align: middle;
}

img {
    vertical-align: middle;
}
<div style="background-color: yellow;">
    <div class="text">1</div>
    <img src="http://static.idokep.hu/images/nagyelore/ujikon2/030.png" width="108" height="50" />
</div>

пример

Ещё вопросы

Сообщество Overcoder
Наверх
Меню