Как центрировать текст по вертикали и горизонтали над изображением с процентной шириной и высотой?

Я пытался центрировать свой текст над div с шириной и высотой в процентах. Я пробовал использовать flexbox, но у меня ничего не вышло, поэтому я использовал этот учебник в качестве справочника: http://jsfiddle.net/4be9cp23/. Вот код из этого руководства:

html

<div id="header">
        <h1>Home</h1>
</div>

CSS

#header {
        background-color: red;  
        color: white;
        text-align: center;
        vertical-align: middle;
        width: 100%; 
        height: 15%;
    }
#header h1{ display:inline-block; }

Вот ссылка на демонстрацию, над которой я работаю, http://codepen.io/maureenv/pen/dMEPap?editors=1100. Я хочу, чтобы белый текст располагался по центру изображения дракона (без перемещения текста в классе контейнера формы под ним):

Я последовал приведенному выше руководству и попробовал: HTML

 <div class="masthead-container">
      <img src="http://maureenvogel.com/images/charizard.jpg" class="masthead-img">

      <div class="quote-container">
        <div class="quote"> "This is my quote that won't center no matter what I do. Lorem ipsum dolor sit amet, consectetur adipiscing 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. " </div>
        <div class="quote-author"> -quote by me</div>
      </div>
    </div> <!-- close masthead container div -->

CSS

.masthead-container .masthead-img{
  width: 100%;
  top: 0;
  left: 0;
  display: block;
  position: relative;
}

.masthead-container {
  text-align: center;
  vertical-align: middle;
}

.masthead-container .quote-container{
  display: inline-block;
}

.quote-container{
  top: 0;
  left: 0;
  color: white;
  position: absolute;
  text-align: center;
  width: 100%;
}

Однако текст отказывается центрироваться, и отображение встроенного блока у меня не работает. Пожалуйста помоги. Спасибо!


html css css-position centering
person Maureen    schedule 16.05.2016    source источник
comment
Вы можете установить img на background-img, а затем заглянуть в display: table; или согните. philipwalton.github.io/solved-by-flexbox/demos/ < / а>   -  person Millard    schedule 16.05.2016

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте что-то вроде этого:

.quote-container{
  top: 50%;
  left:  50%;
  color: white;
  position: absolute;
  text-align: center;
  display:inline-block;
  transform:translateX(-50%) translateY(-50%);
}
person Gavin Thomas    schedule 16.05.2016

arrow_upward
0
arrow_downward

возможно, вы могли бы попытаться поместить свой img на фоне div и сделать:

.masthead-container{
    display: table;
    position: relative;
    width: 100%;
    height: 100%;
   background: url:(...);
}

.text-to-center{
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  
}
<div class="masthead-container">
  <div class="text-to-center"><p>hello-world</p></div>
</div>

person Yanis Ismail    schedule 16.05.2016