Блог

Главная - Вопросы по программированию - Текст CSS неправильно центрирован из-за расположения объекта

Текст CSS неправильно центрирован из-за расположения объекта

#html #css

Вопрос:

Я хочу, чтобы мое сообщение было посередине. Поскольку я добавил элемент в ту же строку, текст смещается вправо.

текущий результат

Мой код выглядит так:

 .property {
  background-color: #497ba7;
  color: #ffff;
  text-align: center;
  margin-left: 50px;
  margin-right: 50px;
  padding: 5px;
}

.navbtntop {
  cursor: pointer;
  float: left;
  font-size: 20px;
  background-color: #497ba7;
  color: #fff;
  border-color: rgba(0, 0, 255, 0.082);
  border-radius: 3px;
  text-decoration: none;
  padding: 7px;
  width: 20%;
  text-align: center;
  margin-left: 5.5%;
} 
 <a href="#" class="navbtntop" onclick="return show('Page1','Page2');">Previous</a>
<h2 class="property">MDU Layout</h2>

В чем же тогда проблема?

Комментарии:

1. Не используйте поплавки, flexbox-ваш друг в наши дни.

Ответ №1:

макет cols

Ваша идея (держите правую колонку «в центре» для всей области обертки).

Один из способов-использовать один «пустой» div (20% — 60% — 20%).

Другой способ-добавить margin-right: 20%; для правильного col.

 .display_grid{
  display: grid;
  border: 2px solid orange;
  grid-template-columns: 20% auto 20%;
}

.left {
  border: 1px solid black;
  display: block;
  background-color: red;
  padding: 20px;
  color: #fff;
  text-align: center;
}

.right {
  background-color: blue;
  color: #ffff;
  text-align: center;
  border: 1px solid red;
  margin: 0px;
} 
 <div class="display_grid">
  <a href="#" class="left">Left</a>
  <h2 class="right">Right</h2>
  <div>
</div>

абсолютное положение

Еще один способ добиться этого — position absolute (старый подход — но в вашем случае, если ширина/содержимое «левого колла» изменятся, возможно, выбора нет).

Минусы: менее отзывчивый текст может перекрываться.

 .relative_wrapper{
  display: grid;
  position: relative;
  border: 2px solid orange;
  grid-template-columns: 20% auto;
}

.left {
  border: 1px solid black;
  display: block;
  background-color: red;
  padding: 20px;
  color: #fff;
  text-align: center;
}

.right {
  background-color: blue;
  color: #ffff;
  text-align: center;
  border: 1px solid red;
  margin: 0px;
  /* position absolute */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
} 
 <div class="relative_wrapper">
  <a href="#" class="left">Left</a>
  <h2 class="right">Right</h2>
  <div>
</div>

https://medium.com/front-end-weekly/absolute-centering-in-css-ea3a9d0ad72e

Комментарии:

1. В принципе, оба кода в порядке, хотя я имею в виду, что я делаю «Правильный» в центре против всего flex_wrapper не только правильным элементом. Возможно ли это? Это то же самое, что у меня было раньше

2. Лучшая идея-создать сетку из трех элементов и оставить последний пустым. (20-60-20). Я редактирую ответ и добавляю пример

Метки: