Jump to content

Question

В этом разделе автор предложил способ выравнивания слоя по центру веб-страницы при фиксированной высоте слоя.

 

Есть ли способ выровнять слой по вертикали с помощью стилей, если высота блока неизвестна заранее (зависит от контента)?

 

Например, http://codepen.io/anon/pen/waCKq?editors=110 Нужно, чтобы слой wrap отображался по центру веб-страницы для браузеров IE7+ и последних версий FF, Sa, Ch, Opera.

 

Примечание: использование inline-block и псевдоэлемента wrap:before (для совместимости с IE7 в указанном выше примере display:inline-block установлен для строчного элемента span, а вместо псевдоэлемента использован span class="before"), увы, не привело к желаемому результату при высоте родительского слоя .wrap{height:100%}, хотя, как видно из примера, отлично работает для центрирования слоя krug внутри слоя ramka.

 

 

 

 

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Спасибо за помощь, xzarxzes! Особенно полезной оказалась ссылка на статью Гэри Тернера, где по шагам рассказано, как работает этот способ центрирования. Прочитав обе статьи, мне легко удалось найти ошибку.

 

Способ для IE7 writing-mode мне еще предстоит хорошенько обмозговать. Возможно, воспользуюсь и им.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Nerwoid
      Ребят всем привет! Я только начал изучать верстку по видео урокам на ютубе. У меня есть свой макет который я купил у дизайнера. Решил с него поучиться верстать. Подскажите как правильно сделать шапку сайта. У меня все выравнивания происходят с помощь отрицательных "margin".  Судя по урокам, везде делают это с помощью flex и тому подобное. Дизайн очень оказался сложным и там много проблем с фонами. Дайте пару советов и подсказок как продолжать дальше. Заранее спасибо ?
       
      Вот: макет:
      Мой сайт
       
    • By yaparoff
      Необходимо выровнять блоки по вертикали. У меня верстка пока получается вот так http://skrinshoter.ru/s/160418/UDCfQwYu
      Подскажите, как это сделать? Верстка респонсив.
      Причем нужно чтобы и заголовки и цены тоже были на одном уровне
      Почему то на codepen это немного по другому выглядит. Но все равно нужно это как то выровнять
    • By AlexProf
      Не получается разобраться, как работает свойство vertical-align. В таблицах работает, а для строчных элементов почему-то нет. Пытаюсь сделать вертикальное выравнивание, но текст не сдвигается
      <div style="height: 200px"><span style="vertical-align: middle">Текст</span></div> Как правильно устанавливать это свойство?
    • By Raiz
      Добрый день!
      Может кто нибудь объяснить мне, не смышленому верстальщику-новичку, как мне выравнить текст по центру картинок?
      Я уже все перепробывал,но что то не клеится((
      на первом скрине я отразил суть проблемы, а на втором то, как это должно быть по макету!
      (я заменил одну картинку, т.к. это не особо важно, но сути это не меняет)
      в html я объединил это все (картинки\текст) в один див и дал ему класс.
      далее я дал класс всем текстовым материалам и ид для каждой картинки, дабы сделать более гибкую настройку, но все пошло не по плану.
       
      в CSS класс текста выглядит так:
      .contenttext {     display: inline-block;     font-family: 'Raleway', Arial, sans-serif;     margin-top: 60px;     font-weight: 500;     font-size: 130%; } Видимо задавать margin-top: 60px; вообще лишнее, по скольку вместе с текстом перемещаются и картинки. Парюсь уже битый час над этим.
      Если кто сможет, подскажите, что можно предпринять для разрешения проблемы.
       


    • By Nigelist
      Имеется конструкция типа:
      <p><img src="image.jpg"></p>Как можно с помощью CSS, указать выравнивание по середине?
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy