Как создать образец PSD с начальной загрузкой 4 - PullRequest
Новая
       31

Как создать образец PSD с начальной загрузкой 4

0 голосов
/ 28 января 2019

Я хочу создать тот же PSD.

psd

<div class="col-md-6 align-self-center" style="font-size: 70%">
    <div class="card-body">
        <div class="d-inline-flex align-items-center">
            <div class="row">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-map-marker-alt"></i></h4>
                <p class="col-sm-11">Address
                    <br>1600 Pennsylvania Ave NW, Washington, DC 20500
                </p>
            </div>
            <div class="row">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-phone"></i></h4>
                <p class="col-sm-11">Telephone
                    <br>8888888888
                </p>
            </div>
            <div class="row">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-envelope"></i></h4>
                <p class="col-sm-11">Email
                    <br>site@gmail.com
                </p>
            </div>
            <div class="row">
                <div class="mr-5 h4">
                    <div class="d-inline">
                        <i class="fab fa-bluetooth-b"></i>
                        <i class="fab fa-instagram"></i>
                        <i class="fab fa-facebook"></i>
                        <i class="fab fa-google-plus"></i>
                        <i class="fab fa-twitter"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Но я вижу это демо.

Demo

justify-content-center выравнивает форму по горизонтали, но я не могу понять, как выровнять ее по вертикали.Я пытался использовать align-items-center и align-self-center, но это не работает.

Что мне не хватает?

1 Ответ

0 голосов
/ 28 января 2019

Вы можете использовать это, чтобы начать: 

<div class="col-md-6 align-self-center" style="font-size: 70%">
    <div class="card-body">
        <div>
            <div class="row">
              <div class="col-sm-11">
                <p class="right">Address
                    <br>1600 Pennsylvania Ave NW, Washington, DC 20500
                </p>
              </div>
              <div class="col-sm-1">
                <h4><i class="fas fa-map-marker-alt"></i></h4>
              </div>
            </div>
            <div class="row">
                <div class="col-sm-11">
                <p class="right">Telephone
                    <br>8888888888
                </p>
              </div>
              <div class="col-sm-1">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-phone"></i></h4>
              </div>
            </div>
            <div class="row">
                <div class="col-sm-11">
                <p class="right">Email
                    <br>site@gmail.com
                </p>
              </div>
              <div class="col-sm-1">
                <h4 class="col-sm-1 ml-3"><i class="fas fa-envelope"></i></h4>
              </div>


            </div>
            <div class="row">
                <div class="right absolute">
                  <div class="mr-5 h4">
                      <div class="d-inline">
                          <i class="fab fa-bluetooth-b"></i>
                          <i class="fab fa-instagram"></i>
                          <i class="fab fa-facebook"></i>
                          <i class="fab fa-google-plus"></i>
                          <i class="fab fa-twitter"></i>
                      </div>
                  </div>
                </div>
            </div>
        </div>
    </div>
</div>

Я добавил немного CSS, чтобы текст справа налево: 

.right {
  text-align: right;
  right: 0;
}

.absolute {
  position: absolute;
}

Вот кодекс, использующий ваш код:https://codepen.io/brooksrelyt/pen/omLevx

Примечание. У меня нет доступа к значкам / изображениям.

...