1

/* Container
===================*/

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}


/*===== Article =====*/

.article__image {
  position: absolute;
  width 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  z-index: 1;
}

.article {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  height: 600px;
  width: 500px;
  display: flex;
  position: relative;
  background: rgb(97, 7, 244);
  background: linear-gradient(90deg, rgba(97, 7, 244, 1) 0%, rgba(140, 14, 230, 1) 100%);
  justify-content: center;
  align-items: center;
}

.container {
  padding: 10px;
  width: 400px;
  height: 50px;
}

.article__title {
  margin-top: 70px;
  margin-left: 100px;
}

.article__text {
  margin-top: 10px;
}


/*/===== Article =====*/
<article class="article">
  <div class="container">
    <img src="https://via.placeholder.com/300" alt="" class="article__image">
    <h1 class="article__title">Lorem ipsum.</h1>
    <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At distinctio, nulla soluta voluptatem in nemo sequi amet! Optio, repellendus! Excepturi reiciendis, perspiciatis voluptatum impedit expedita quo vero inventore ipsa, sint.</p>
  </div>
</article>

Мне нужно выровнять фотографию по центру блога arcticle так, чтобы она была выше текста, но при этом находилась в этом блоке, как это сделать?

2
  • Центрировать по вертикали и горизонтали или только по горизонтали?
    – VenZell
    21 июл 2021 в 13:32
  • и по вертикали и по горизонтали imgur.com/a/1dtpIW8 вот чтобы он по центру этого блока встал
    – imdev
    21 июл 2021 в 13:35

1 ответ 1

0

Чтобы выровнять картинку по центру блока article добавьте transform: translate(-50%, -50%); для .article__image

/* Container
===================*/

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}


/*===== Article =====*/

.article__image {
  position: absolute;
  width 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.article {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.3);
  height: 600px;
  width: 500px;
  display: flex;
  position: relative;
  background: rgb(97, 7, 244);
  background: linear-gradient(90deg, rgba(97, 7, 244, 1) 0%, rgba(140, 14, 230, 1) 100%);
  justify-content: center;
  align-items: center;
}

.container {
  padding: 10px;
  width: 400px;
  height: 50px;
}

.article__title {
  margin-top: 70px;
  margin-left: 100px;
}

.article__text {
  margin-top: 10px;
}


/*/===== Article =====*/
<article class="article">
  <div class="container">
    <img src="https://via.placeholder.com/300" alt="" class="article__image">
    <h1 class="article__title">Lorem ipsum.</h1>
    <p class="article__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At distinctio, nulla soluta voluptatem in nemo sequi amet! Optio, repellendus! Excepturi reiciendis, perspiciatis voluptatum impedit expedita quo vero inventore ipsa, sint.</p>
  </div>
</article>

1
  • Спасибо вам огромное!
    – imdev
    21 июл 2021 в 14:06

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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