CSS: горизонтальное центрирование текста между двумя стрелками - PullRequest
Новая
       0

CSS: горизонтальное центрирование текста между двумя стрелками

0 голосов
/ 14 апреля 2020

Я работаю над проектом HTML / CSS. У меня есть следующий код:

стрелки категорий. html: 

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>CSS Arrows</title>
        <link rel="stylesheet" type="text/css" href="category-arrows.css">
    </head>
    <body>
        <div class="arrows-container">
            <div class="up-arrow"></div>
            <div class="category-rank">
                <p>2</p>
            </div>
            <div class="down-arrow"></div>
        </div>
    </body>
</html>

стрелки категорий. css: 

.up-arrow {
    width: 60px;
    height: 60px;
    border-top: 15px solid #000000;
    border-right: 15px solid #000000;
    transform: rotate(-45deg);
    margin: 50px;
    border-radius: 15%;
}

.up-arrow:hover, .down-arrow:hover {
    border-top: 15px solid #28bfa6;
    border-right: 15px solid #28bfa6;
    cursor: pointer;
}

.down-arrow {
    width: 60px;
    height: 60px;
    border-top: 15px solid #000000;
    border-right: 15px solid #000000;
    transform: rotate(135deg);
    margin: 50px;
    border-radius: 15%;
    position: relative;
    top: -105px;
}

.category-rank {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    right: -69px; 
    margin-top: -36px;
    font-size: 60px;
    font-family: Helvetica;
}

Результат Код выше:

enter image description here

Когда число между стрелками равно -1, я получаю следующее:

enter image description here

Когда число между стрелками отрицательное (например, -1), текст не полностью горизонтально отцентрирован между стрелками. Я использую свойство CSS right, чтобы центрировать текст между стрелками. Это прекрасно работает, когда число между стрелками не имеет отрицательного знака перед ним.

Я бы хотел, чтобы текст между стрелками всегда был горизонтально отцентрирован. Тем не менее, я не уверен, что лучший способ сделать это. Любые идеи приветствуются.

Ответы [ 2 ]

1 голос
/ 14 апреля 2020

Ваш макет не работает, если вы просто добавите границы и отступы, и вы увидите, что все выровнено по мисс. 

body * {
  border: 1px solid;
  padding: 10px;
}

.up-arrow {
  width: 60px;
  height: 60px;
  border-top: 15px solid #000000;
  border-right: 15px solid #000000;
  transform: rotate(-45deg);
  margin: 50px;
  border-radius: 15%;
}

.up-arrow:hover,
.down-arrow:hover {
  border-top: 15px solid #28bfa6;
  border-right: 15px solid #28bfa6;
  cursor: pointer;
}

.down-arrow {
  width: 60px;
  height: 60px;
  border-top: 15px solid #000000;
  border-right: 15px solid #000000;
  transform: rotate(135deg);
  margin: 50px;
  border-radius: 15%;
  position: relative;
  top: -105px;
}

.category-rank {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  right: -69px;
  margin-top: -36px;
  font-size: 60px;
  font-family: Helvetica;
}
<div class="arrows-container">
  <div class="up-arrow"></div>
  <div class="category-rank">
    <p>-1</p>
  </div>
  <div class="down-arrow"></div>
</div>

Вместо этого вы должны включить изменяющийся элемент, p - это тот, который изменяется, поэтому мы выравниваем стрелки в соответствии с ним.

display:inline-flex к контейнеру уменьшит его до размера самого широкого элемента, который обозначает тег p, и мы применяем align-items: center; для центрирования стрелок по горизонтали. 

/* remove unnecessary padding and margin */
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.arrows-container {
  padding: 20px; /* just to be safe */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.up-arrow {
  width: 60px;
  height: 60px;
  border-top: 15px solid #000000;
  border-right: 15px solid #000000;
  transform: rotate(-45deg);
  border-radius: 15%;
}

.up-arrow:hover,
.down-arrow:hover {
  border-top: 15px solid #28bfa6;
  border-right: 15px solid #28bfa6;
  cursor: pointer;
}

.down-arrow {
  width: 60px;
  height: 60px;
  border-top: 15px solid #000000;
  border-right: 15px solid #000000;
  transform: rotate(135deg);
  border-radius: 15%;
}

.category-rank {
  font-size: 60px;
  font-family: Helvetica;
}


/* For the red line to show center, Not needed */

.arrows-container {
  position: relative;
}

.arrows-container:before {
  content: '';
  position: absolute;
  height: 100%;
  width: 2px;
  background: red;
  top: 0;
}
<div class="arrows-container">
  <div class="up-arrow"></div>
  <div class="category-rank">
    <p>-1</p>
  </div>
  <div class="down-arrow"></div>
</div>
<div class="arrows-container">
  <div class="up-arrow"></div>
  <div class="category-rank">
    <p>1</p>
  </div>
  <div class="down-arrow"></div>
</div>
<div class="arrows-container">
  <div class="up-arrow"></div>
  <div class="category-rank">
    <p>58</p>
  </div>
  <div class="down-arrow"></div>
</div>

Я попытался немного почистить код.

1 голос
/ 14 апреля 2020

Одним из решений было бы проверить, если number < 0, а затем использовать str.substring(1), чтобы удалить первый символ этого числа (знак минус), а затем отобразить знак минус рядом с ним в фиксированной позиции в промежутке для пример или что-то еще.

Таким образом, число всегда будет центрировано, и если оно будет отрицательным, знак минус будет показывать себя, а не перемещать само число.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...