Проблема с блоками. Не могу нормально понять, как мне сделать то, что у меня в голове

Рейтинг: 0Ответов: 2Опубликовано: 02.03.2023

Ребят, только начинаю изучать html и css, делаю свой третий сайт, так что не судите строго. Есть два блока и их нужно выровнять, так как на картинке, как мне это сделать? Через display:flex, justify-content:center не выравнивается, блок приклеен к левому краю. Если не сложно, объясните как это работает, кратко (заранее спасибо😊). введите сюда описание изображения

.card { 
    font-family: 'Source Code Pro', monospace;
    color: white;
    font-size: 25px;
    text-align: center;
    
    padding-top: 40px;
    margin: 0;
    
    width: 370px;
    height: 440px;
    
    border-radius: 30px;
    background: rgba(107, 107, 107, 0.651);
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.527),
                -15px -15px 30px rgba(135, 133, 138, 0.692);
}
   
    <div class="card">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint ullam laborum ipsa voluptatum  quis possimus doloribus maiores cum omnis saepe, voluptatibus corrupti aliquam quas illo. Tempore consequuntur esse impedit molestias.</p>
    </div>

css html
Источник: Stack Overflow на русском

Ответы

▲ 0

Можно обернуть элемент в отдельный div контейнер

.cardCont {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .card {
    font-family: 'Source Code Pro', monospace;
    color: white;
    font-size: 25px;
    text-align: center;

    padding-top: 40px;
    margin: 0;

    width: 370px;
    height: 440px;

    border-radius: 30px;
    background: rgba(107, 107, 107, 0.651);
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.527),
    -15px -15px 30px rgba(135, 133, 138, 0.692);
  }
<div class="cardCont">
  <div class="card">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint ullam laborum ipsa voluptatum  quis possimus doloribus maiores cum omnis saepe, voluptatibus corrupti aliquam quas illo. Tempore consequuntur esse impedit molestias.</p>
  </div>
</div>

▲ 0

Мне кажется вам нужен был именно такой вариант. Он и хорошо адаптирован и никаких margin-left: -px;

p { 
    font-family: 'Source Code Pro', monospace;
    color: white;
    font-size: 14px;
    text-align: center;
    padding: 40px 10px 40px;
    margin: 0;
    
    width: 170px;
    
    border-radius: 30px;
    background: rgba(107, 107, 107, 0.651);
    box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.527),
                -15px -15px 30px rgba(135, 133, 138, 0.692);
}
.card {
  display: flex;
  max-width: 500px;
  justify-content: space-between;
  margin: 0 auto;
  height: 440px;
}
.left, .right {
  width: 50%;
  height: 100%;
}
.right {
  display: flex;
  align-items: flex-end;
}
<div class="card">
    <div class="left">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint ullam laborum ipsa voluptatum  quis possimus doloribus maiores cum omnis saepe, voluptatibus corrupti aliquam quas illo. Tempore consequuntur esse impedit molestias.</p>
      </div>
      <div class="right">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint ullam laborum ipsa voluptatum  quis possimus doloribus maiores cum omnis saepe, voluptatibus corrupti aliquam quas illo. Tempore consequuntur esse impedit molestias.</p>
        </div>
</div>