3
<section id="promo-block">
<div class="container">
    <div class="col-sm-6">
        <h2>Displaying the Result</h2>
        <p>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.</p>
    </div>
</div>
</section>

Есть такая разметка HTML:

 #promo-block{
    height:300px;
  position: relative;
  z-index: 1;
  text-align: center;
  background: url(img/1920x1080/02.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
    min-height:100%;
}

Вот такой CSS:

Как я могу выровнять текст по центру родителя? Выровнять его по горизонтали не составило труда, но по вертикали никак не получается.

3 ответа 3

3

Вот пример как можно создать то что вам нужно -

<!DOCTYPE html>
    <html lang="en">
        <head>
            <title>Vertically Center Text</title>
            <style>
                html, body {
                    height: 100%;
                    margin: 0;
                    padding: 0;
                    width: 100%;
                }
                body {
                    display: table;
                }
                .centered-text {
                    text-align: center;
                    display: table-cell;
                    vertical-align: middle;
                }
            </style>
        </head>
        <body>
        <div class="centered-text">
          <h1>Yes It's My landing Page</h1>
    	  <h2>Under Construction, Coming Soon !!!</h2>
        </div>
        </body>
    </html>

2

#promo-block {
  height: 800px;
  position: relative;
  z-index: 1;
  text-align: center;
  background: url(img/1920x1080/02.jpg) no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  min-height: 100%;
}

#promo-block>.container {
  height: 100%;
}

#promo-block>.container>.row {
  height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<section id="promo-block">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-sm-6">
        <h2>Displaying the Result</h2>
        <p>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.</p>
      </div>
    </div>
  </div>
</section>

2
  • Вы ведь выровняли только по горизонтали. А по вертикали? 18 дек 2017 в 11:51
  • @Klimenkomud по вертикали тоже. Откройте ответ на весь экран. Сейчас еще увеличу высоту #promo-block для наглядности
    – fanfer
    18 дек 2017 в 14:50
1

#promo-block {
height: 300px;
display: flex;
flex-wrap: wrap;
background: url(img/1920x1080/02.jpg) no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
#promo-block .container{
align-self: center;
display:flex;
flex-wrap: wrap;
}
.col-sm-6 {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
<section id="promo-block">
    <div class="container">
        <div class="col-sm-6">
            <h2>Displaying the Result</h2>
            <p>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.</p>
        </div>
    </div>
    </section>

Можно вот-так на флексах.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.