Текст центра над изображением в flexbox

Ответ 1

Чтобы центрировать текст над изображением, вам не нужен flexbox. Просто используйте свойства позиционирования CSS.

.height-100vh {
    height: 100vh;
    position: relative;               /* establish nearest positioned ancestor for
                                         absolute positioning */
}

.text {
    position: absolute;  
    left: 50%;                        /* horizontal alignment */
    top: 50%;                         /* vertical alignment */
    transform: translate(-50%, -50%); /* precise centering; see link below */
}

Пересмотренный Codepen

Приведенный выше код центрирует текст как по вертикали, так и по горизонтали над изображением:

Более подробное объяснение метода центрирования см. В:

• Элемент не будет оставаться центрированным, особенно при повторной калибровке экрана

Ответ 2

Вы можете просто обернуть изображение с помощью relative ly inline-block <div> и передать текст следующим образом:

* {margin: 0; padding: 0; list-style: none;}
.img-holder {position: relative; display: inline-block;}
.img-holder img {display: block;}
.img-holder p {position: absolute; top: 50%; left: 0; right: 0; transform: translate(0, -50%); text-align: center; color: #fff; text-shadow: 0 0 15px;}

<div class="img-holder">
  <img src="http://bit.ly/1YrRsis" alt="">
  <p>Text Aligned Centrally Vertical &amp; Horizontal.</p>
</div>

Ответ 3

Я добавил еще один wrapper div, окружающий img и текст, а также используя flex для размещения текста. Смотрите codepen

HTML:

<section class="height-100vh center-aligned">
  <div class="wrapper">
    <img class="background-image" src="http://bit.ly/1YrRsis" />
    <div class="text">SOME TEXT</div>
  </div>
</section>

CSS

@import "bourbon";

body {
  margin: 0px;
}

.height-100vh {
  height: 100vh;
}

.center-aligned {
  @include display(flex);
  @include align-items(center);
  @include justify-content(center);
}

.wrapper {
  position: relative;
}

.text {
  justify-content: center;
  align-items: center;
  display: flex;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Ответ 4

Вы также можете центрировать выравнивание текста на изображении с помощью display: inline-block; к элементу обертки.

.height-100vh {
  display: inline-block;
  position: relative;
}
.text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

<section class="height-100vh center-aligned">
  <img class="background-image" src="http://vignette2.wikia.nocookie.net/uncyclopedia/images/f/f8/Stand-out-in-the-crowd-300x300.jpg" />
  <div class="text">SOME TEXT</div>
</section>

Ответ 5

Я добавил еще 2 divs

<div class="text box" >
     <img src="images/woodenbridge.jpg" alt="Wooden Bridge"  />
     <div class="slide-box flex">
        <div class="flex-item"></div>
     </div>
</div>

а затем в следующем порядке:

.flex-item {
    display: inline;
    align-self: center;
}

Ответ 6

Вы можете использовать функцию преобразования CSS3. Высота и ширина элементов в .box-item могут быть динамическими.

.container {
  width: 200px;
  height: 200px;
  position: relative;
  background: red;
}

.box {
  position: absolute;
  left: 50%;
  top: 50%;
}

.box-item {
  position: relative;
  left: -50%;
  top: -50%;
  transform: translate(0, -50%);
  background: yellow;
}

<div class="container">
  <div class="box">
    <div class="box-item">
      <span>
        Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.
      </span>
    </div>
  </div>
</div>