Блог

Главная - Вопросы по программированию - div выровнен по абзацу в ячейке html

div выровнен по абзацу в ячейке html

#html #css

Вопрос:

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

К сожалению, я не мастер css или html, я перепробовал множество вариантов выравнивания, которые нашел на этом и других сайтах, но ни один из них не сработал. Вы можете посмотреть на минимальный пример ниже, чтобы понять, о чем я говорю. Есть ли какой-нибудь способ сделать это в css? Спасибо

 .badge{
  background-color: #000000;
  width: 1em;
  height: 1em;
  border-radius: 25%;
} 
 <html>
  <body>
    <table border="1">
      <tr>
        <td>
          <div class="badge"></div> not horizontally aligned text
        </td>
      </tr>
    </table>
  </body>
</html>

Ответ №1:

Вместо вложения a <div> для значка вы можете создать ::before псевдоэлемент для каждого <td> и сделать так inline-block , чтобы псевдоэлемент оставался встроенным в текстовое содержимое. Таким образом, вы можете гарантировать, что каждый элемент данных таблицы будет иметь маленький цветной квадрат перед текстовым содержимым ячеек.

 .badge::before {
  content: "";
  background-color: #000000;
  width: 1em;
  height: 1em;
  border-radius: 25%;
  display: inline-block;
  vertical-align: middle;
}

/* Optionally, give the cells different colors */
.badge.two::before {
  background-color: #ae7;
}

.badge.three::before {
  background-color: #f06;
} 
 <html>
  <body>
    <table border="1">
      <tr>
        <td class="badge one">
          some text in cell 1
        </td>
         <td class="badge two">
          some text in cell 2
        </td>
         <td class="badge three">
          some text in cell 3
        </td>
      </tr>
    </table>
  </body>
</html>

Если вместо этого вы хотите сохранить ту же структуру HTML, вы можете создать <td> гибкий блок, чтобы содержимое display: flex было выровнено в формате строки (бок о бок). Использование align-items определит, как элементы будут выровнены по поперечной оси.

 .badge{
  background-color: #000000;
  width: 1em;
  height: 1em;
  border-radius: 25%;
}

td {
  display: flex;
  align-items: center;
} 
 <html>
  <body>
    <table border="1">
      <tr>
        <td>
          <div class="badge"></div> not horizontally aligned text
        </td>
      </tr>
    </table>
  </body>
</html>

Ответ №2:

Используйте flexbox:

 .badge {
  background-color: #000000;
  width: 1em;
  height: 1em;
  border-radius: 25%;
  margin-right: 1em;
}

td {
  display: flex;
  align-items: center;
} 
 <html>

<body>
  <table border="1">
    <tr>
      <td>
        <div class="badge"></div>horizontally aligned text
      </td>
    </tr>
  </table>
</body>

</html>
Метки: