Как сделать текст с центром шрифта 'font-size: ~ small' в строке таблицы - PullRequest
Новая
       0

Как сделать текст с центром шрифта 'font-size: ~ small' в строке таблицы

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

См. Этот код: https://codepen.io/atom999/pen/eYpZXqK

<head>
<style>
span {
  font-size: 8pt;
}
</style>
</head>
<table>
  <td>
  <td> Choose >>> </td>
    <td>
        <input name="vid" type="radio" id="foo" checked>
    <span>
      this text is too low, I want it centered with the radio button
    </span>  
  </td>
</table>

Приложение, над которым я работаю, имеет "font-size: 8pt;" .. и я не могу изменить который. Но все, что я хочу сделать, это центрировать этот текст поменьше с помощью переключателя. Я перепробовал все стили, связанные со шрифтами и размерами, и ничто не позволяет мне центрировать этот меньший текст в строке таблицы.

Как я могу это сделать?

Ответы [ 4 ]

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

С базовым c flex-свойством, align-items: center ; текст выравнивается по вашей радио-кнопке: 

.tableRow{
  display: flex;
  align-items:center;
}
<head>
<style>
span {
  font-size: 8pt;
}
</style>
</head>
  

<table>
  <td>
  <td> Choose >>> </td>
	<td class="tableRow">
		<input name="vid" type="radio" id="foo" checked>
    <span>
      this text is too low, I want it centered with the radio button
    </span>  
  </td>
  
</table>
1 голос
/ 17 апреля 2020

@ Atom999 Я изменил ваш элемент <span> в гибкий контейнер и сделал элементы встроенными в центр с помощью переключателя. Надеюсь, это поможет! 

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

span {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 8pt;
  display: inline;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- CSS -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <table>
      <td>
      <td> Choose >>> </td>
      <td>
        <input name="vid" type="radio" id="foo" checked>
        <span>
      this text is too low, I want it centered with the radio button
        </span>  
      </td>
    </table>
  </body>
</html>
1 голос
/ 17 апреля 2020

Просто добавьте это в ваш .css файл: 

input[name="vid"] {
span {
display:flex;
align-items:center;
}  
}

Надеюсь, это поможет

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

Вы можете использовать гибкий макет для выравнивания. 

<head>
<style>
span {
  font-size: 8pt;
}
</style>
</head>
<table>
  <td>
  <td> Choose >>> </td>
    <td style="display: flex;align-items: center;justify-content: center;">
        <input name="vid" type="radio" id="foo" checked>
    <span>
      this text is too low, I want it centered with the radio button
    </span>  
  </td>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...