Центрирование текста под абсолютным интервалом

Question

Центрирование текста под абсолютным интервалом

В следующем коде у меня есть div, который включает число и его единицы (в примере 1000 миль). В центре Div находится числовое значение OK, но мне нужно, чтобы единицы были центрированы прямо под номером. Как это возможно?

div.div1 {
  height: 200px;
  width: 200px;
  background-color: orange;
  position: relative;
}

span.number {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

span.units {
  margin: 0 auto;
}

<div class="div1">
  <span class="number">1,000</span>
  <br/>
  <span class="units">miles</span>
</div>

html,css,

-1

Ответов: 9

HTML, CSS,

Похожие вопросы

score 1 · Accepted Answer

1 принят

Просто вставьте текст в первый прогон так:

<div class="div1">
    <span class="number">
        1,000
        <span class="units">miles</span>
    </span>
</div>

И добавьте этот CSS:

.units{
    display:block;
    text-align: center;
    font-size: 14px;
}

score 3 · Accepted Answer

3

Использовать flexbox

.div1 {
  height: 200px;
  width: 200px;
  background-color: orange;

  display: flex;
  flex-direction: column;
  justify-content: center;    /* Vertical center */
  align-items: center;    /* Horizontal center */
}

.number {
  font-family: Verdana;
  font-size: 36px;
  font-weight: bold;
}

<div class="div1">
  <span class="number">1,000</span>
  <span class="units">miles</span>
</div>

score 0 · Accepted Answer

0

Один из способов сделать это - использовать flexbox следующим образом:

.div1{
  display:flex;
  flex-flow:column;
}

score 0 · Accepted Answer

0

Измените значение topin span.units.

div.div1 {
  height:200px;
  width:200px;
  background-color:orange;
  position: relative;
}
span.number {
font-family: Verdana;
font-size: 36px;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
span.units {
font-family: Verdana;
font-size: 36px;
font-weight: bold;
position: absolute;
top: 70%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}

<div class="div1">
   <span class="number">1,000</span><br>
      <span class="units">miles</span>
   <br>

</div>

score 0 · Accepted Answer

0

CSS Flexbox на помощь! (и мы также можем избавиться от целой кучи ненужных CSS)

div.div1 {
    height:200px;
    width:200px;
    background-color:orange;
    display:flex;            /* Make the container a flex-container */
    justify-content:center;  /* Horizontally align children */
    align-items:center;      /* Vertically align children */
    flex-direction:column;   /* Change from row to column based layout */
}

div.number {
    font-family: Verdana;
    font-size: 36px;
    font-weight: bold;
}

<div class="div1">
  <div class="number">1,000</div>
  <div class="units">miles</div>
</div>