Вертикальное выравнивание элемента блока с изображением? - PullRequest
Новая
       14

Вертикальное выравнивание элемента блока с изображением?

0 голосов
/ 31 января 2012

Я ищу способ вертикально выровнять элемент блока по изображению.На моем сайте это изображение будет динамически изменяться по высоте и ширине, поэтому мне потребуется вертикальное выравнивание, чтобы адаптироваться к любому размеру изображения.Например: 

<img src="photo.jpg" alt="test" />
<div id="box">
</div>

img { float: left; }

#box { float: right; width: 200px; height: 150px; background-color: #666; }

Так что я бы хотел, чтобы этот div вертикально выравнивался с изображением.Как это может быть сделано?Спасибо.

1 Ответ

3 голосов
/ 31 января 2012

Хитрость в том, чтобы добавить пару слоев div-оболочки.Первый слой установлен на white-space: nowrap и max-width:50%, что означает, что элементы внутри не могут переноситься, и ограничены 50% ширины родительского элемента.

Затем вы устанавливаете пробел обратнок нормальному, и сделайте второй слой display:inline-block, чтобы эти элементы div воспроизводились по правилам выравнивания текста.Затем вы устанавливаете оба из них на vertical-align:middle; Только один не будет работать, потому что вертикальное выравнивание относительно базовой линии текста, а не содержащего элемента блока.

Таким образом, мы ограничились одной строкой «текста», состоящей из двух элементов div, выровненных так, что их середина находится на базовой линии текста, и обеспечили, чтобы их размер не превышал 50%.родительского контейнера.

РЕДАКТИРОВАТЬ: Я обнаружил после небольшой игры, что вам нужно добавить максимальную ширину: 100%, чтобы изображение не выдвигало текст с правой стороны.

РЕДАКТИРОВАТЬ 2: Я должен был упомянуть, что для этого требуется режим стандартов IE-8, добавлен метаэквивалент, чтобы сказать IE-8, чтобы он вел себя сам, но давая правильный тип документа или отправляя заголовок ответа http, можно добитьсято же самое, режим стандартов Google IE8 для всего этого. 

<html >  
  <head>  
    <title>Test</title>  
    <meta http-equiv="X-UA-Compatible" content="IE=8" />
    <style type="text/css">
      .wrapper1 {
        white-space:nowrap;
        max-width:50%;
      }
      .wrapper2 {
        white-space:normal;
        display:inline-block;
        vertical-align:middle;
        max-width:100%;
      }
      .variable-img {
        max-width:100%;
      }
    </style>
  </head>  
  <body>  
  <div class="wrapper1">
    <div class="wrapper2">
      <img class="variable-img" src="test.png">
    </div>
    <div class="wrapper2">
      <div id="box">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
        sed do eiusmod tempor incididunt ut labore et dolore magna 
        aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
        ullamco laboris nisi ut aliquip ex ea commodo consequat. 
        Duis aute irure dolor in reprehenderit in voluptate velit 
        esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
        occaecat cupidatat non proident, sunt in culpa qui officia 
        deserunt mollit anim id est laborum</div>
      </div>
    </div>
  </body>  
</html>
...