Слово не перемещается в центр

Question

Слово "Travel" не смещается к центру. Пробовал и padding и margin, твердо уселся в углу , и лишь только на чуть чуть смещается вправо, после прописки text-align: center;

* {
  margin: 0;
  padding: 0;
}

body {
  width: 1300px;
  height: 1600px;
  background-color: #e8e8e8;
}

.block {
  /* Style for "Ellipse 1" */
  margin: 400px 300px 700px 400px;
  /*background-color: #80b7b3;*/
}

.travel {
  width: 67px;
  height: 10px;
  opacity: 0.6;
  color: #273d46;
  font-family: "Arial MT";
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2.8px;
}

<div class="travel">
  Travel
</div>



<div class="block">
  <img src="Ellipse_1_copy.png" height="500px" width="500px">
</div>

Answer 1

Для того, чтобы блок располагался по центру экрана, следует классу .travel задать ширину: width: 100% и display: flex, в таком случае, ваш элемент .travel будет иметь ширину равную ширине экрана пользователя не зависимо от того какое у него разрешение, после того, как вы добавили свойство display и width следует выровнять элементы в данном блоке по центру, для этого: прописываем свойство justify-content: center; для того, чтобы выровнять элементы в блоке по горизонтали, если хотите выровнять элементы блока и по вертикали, для этого следует прописать данное свойство: align-items: center; Хотел бы отметить, что эти свойства(justify-content: center; и align-items: center;) работают только при display: flex. Если еще будут вопросы - пишите!

Answer 2

Если блок с фикс шириной, то задайте ему margin-left:auto; margin-right: auto; чтобы разместить по центру.

* {
  margin: 0;
  padding: 0;
}

body {
  width: 1300px;
  height: 1600px;
  background-color: #e8e8e8;
}

.block {
  /* Style for "Ellipse 1" */
  margin: 400px 300px 700px 400px;
  /*background-color: #80b7b3;*/
}

.travel {
  width: 67px;
  margin-left:auto;
  margin-right: auto;
  height: 10px;
  opacity: 0.6;
  color: #273d46;
  font-family: "Arial MT";
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2.8px;
}

<div class="travel">
  Travel
</div>



<div class="block">
  <img src="Ellipse_1_copy.png" height="500px" width="500px">
</div>

БЛОГ НА HUSL

Слово не перемещается в центр

Ответы (2 шт):