Как эффективно выровнять изображение слева и текст справа в таблице? - PullRequest
Новая
       166

Как эффективно выровнять изображение слева и текст справа в таблице?

0 голосов
/ 06 августа 2020

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

пока что я пробовал 

<table style="width: 100%; table-layout: fixed"  class="table  table-striped text-center">
      <thead class='bg-dark' style='background-color: 3658DE'>
      <tr>
        <th><img src='../assets/img/gold.png'/>Rank</th>
        <th><i class='fa fa-user mr-1' style='color: #F4B806'></i>Members</th>
      </tr>
      <tr>
        <td>
          1
        </td>
        <td>
           <div class='text-center'>                                                                                    
              <img src='images' alt='user dp'  class=' img-fluid  rounded-circle' style='height: 30px; width: 30px;' />                                                                                      
              <span class='mr-1 '>@$username</span>
          </div>
        <td>
      </tr>
     </thead>
    <tbody>

Ожидаемый результат: 

Rank    Member
1       image Dravid
2       image Richard Nixon
3       image GrahamBell
4       image Mark twains

Получение вывода: 

Rank    Member
1       image Dravid
2         image RichardNixon
3        image GrahamBell
4       image Mark twains

Ответы [ 2 ]

0 голосов
/ 06 августа 2020 

img {margin-right:10px;};
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">Rank</th>
      <th scope="col">Member</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td><img src="image"/>member</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td><img src="image"/>anotherMember</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td><img src="image"/>oneMoreMember</td>
    </tr>
  </tbody>
</table>
Пожалуйста, проверьте разметку своей таблицы, похоже, что в <tbody> нет данных. Если вам нужно показать изображение пользователя перед именем пользователя, поместите <img/> внутри тега <td> непосредственно перед именем участника (в вашем случае username ). Это даст вам выравнивание в соответствии с вашими потребностями, независимо от длины имени пользователя при условии, что размер (в основном ширина) всех изображений одинаковый . Я добавил немного CSS, чтобы оставить пространство между всеми изображениями и именами пользователей. Также убедитесь, что это пространство остается постоянным для всех изображений, если вы хотите sh включить его.
0 голосов
/ 06 августа 2020

Ваша проблема в том, что вы используете класс text-center на каждой <tr> секунде <td> (для отображения имени пользователя). Это потому, что ваши они центрированы соответственно, что приводит к этой ошибке:

Bug reproduction

In order to solve this you have to replace it with text-left like in this example. The same for the second . In order to place your item more to the right, apply a padding-left, e.g., by adding Bootstrap's pl-5:

  Ранг   Члены     1  пользователь dp Дравид      2  пользователь dp Ричард Никсон      3  пользователь dp GrahamBell

Здесь вы можете найти работающую скрипку , которая дает следующую таблицу:

Итоговая таблица

...