2

Здравствуйте, есть следующий код:

.about-me-block {
  width: auto;
  height: 600px;
  background-color: #CAF7E2;
  padding: 0 10%;
}

.profile-block {
  width: auto;
  height: 300px;
  background-color: #456990;
}

.profile-image {
  width: 300px;
  height: 300px;
  background-color: #F45B69;
  display: inline-block;
  float: left;
}

.profile-text {
  width: 200px;
  height: 200px;
  background-color: #E4FDE1;
  display: inline-block;
}
<div class="about-me-block">
  <div class="profile-block">
    <div class="profile-image"></div>
    <div class="profile-text"></div>
  </div>
</div>

Как мне выровнять по центру горизонтали profile-text, не используя отступы? Пытался при помощи vertical-align, но не получилось.

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа).
    – Arthur
    22 апр 2018 в 8:38

1 ответ 1

1

Вариант с абсолютным позиционированием:

* {
  margin: 0;
  padding: 0;
}

.about-me-block {
  width: auto;
  height: 600px;
  background-color: #CAF7E2;
  padding: 0 10%;
}

.profile-block {
  position: relative;
  width: auto;
  height: 300px;
  background-color: #456990;
}

.profile-image {
  width: 300px;
  height: 300px;
  background-color: #F45B69;
  display: inline-block;
  float: left;
}

.profile-text {
  /*BEGIN*/
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /*END*/
  width: 200px;
  height: 200px;
  background-color: #E4FDE1;
  display: inline-block;
}
<div class="about-me-block">
  <div class="profile-block">
    <div class="profile-image"></div>
    <div class="profile-text"></div>
  </div>
</div>

Вариант с Flexbox:

* {
  margin: 0;
  padding: 0;
}

.about-me-block {
  width: auto;
  height: 600px;
  background-color: #CAF7E2;
  padding: 0 10%;
}

.profile-block {
  /*BEGIN*/
  display: flex;
  align-items: center;
  /*END*/
  width: auto;
  height: 300px;
  background-color: #456990;
}

.profile-image {
  width: 300px;
  height: 300px;
  background-color: #F45B69;
}

.profile-text {
  width: 200px;
  height: 200px;
  background-color: #E4FDE1;
}
<div class="about-me-block">
  <div class="profile-block">
    <div class="profile-image"></div>
    <div class="profile-text"></div>
  </div>
</div>

3
  • Хороший полный ответ (+) 19 апр 2018 в 18:59
  • @Arthur , спасибо большое 22 апр 2018 в 16:39
  • @НовиковМаксим, пожалуйста=)
    – Arthur
    22 апр 2018 в 16:40

Ваш ответ

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

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