Почему изображение не центрируется в <table><td>?

поэтому я создаю веб-приложение с помощью скрипта Google, и в результате получается панель инструментов с несколькими таблицами. Я также использую начальную загрузку (https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css). Я искал ответ долгие дни, но я просто не могу понять, что мне не хватает.

Итак, в таблицу я хочу вставить изображение, которое должно быть центрировано по горизонтали и вертикали, в центре td и должно соответствовать и адаптироваться к высоте строки или td, которую я выберу.

Но снова и снова мое изображение идет к нижней части td/row и часто перекрывается и находится ниже ряда, кажется, что оно имеет правильную высоту, но никогда не размещается правильно. Я сделал копию небольшой части моего кода, чтобы сделать его более понятным:

Вот результат, который я получаю

И вот мой код:

.row {}

table {
  text-align: center;
}

tr {
  line-height: 20px;
}

th,
td {
  position: relative;
  text-align: center;
  vertical-align: middle;
}

img {
  display: block;
  vertical-align: center;
  position: absolute;
  height: 20px;
}
<!DOCTYPE html>
<html lang = "en">

<head>
  <base target = "_top">
  <!-- Required meta tags -->
  <meta charset = "utf-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1">
  <!-- Bootstrap CSS -->
  <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
  <?!= include("page-css"); ?>
</head>

<body>

  <div class = "container">
    <div class = "row" style = "width: 500px">
      <!-- TABLE TEST -->
      <div>
        <!-- Test -->
        <table class = "table">
          <thead>
            <tr>
              <th>Rank</th>
              <th>Name</th>
              <th>Points</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td><img src = "https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td>
              <td>3</td>
            </tr>
            <tr>
              <td>11</td>
              <td><img src = "https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td>
              <td>33</td>
            </tr>
            <tr>
              <td>111</td>
              <td><img src = "https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td>
              <td>333</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- CLOSE TABLE TEST -->

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

Спасибо может кто поможет

Вы пытались изучить его в инспекторе DOM, чтобы увидеть, что такое ограничивающая рамка изображения?

Barmar 05.04.2022 22:57

вам нужно поместить css и html в один фрагмент

fnostro 05.04.2022 23:00

@ Бармар? Я новичок в html, только изучаю его прямо сейчас, я не знаю, что такое инспектор DOM, я попытаюсь найти его, спасибо.

LeSmoox 05.04.2022 23:01

Это вкладка «Элементы» инструментов разработчика в Chrome.

Barmar 05.04.2022 23:02

@fnostro я только что сделал копию части кода, я просто не мог вставить его полностью, но кроме этой самой проблемы, все остальные стили работают нормально.

LeSmoox 05.04.2022 23:03

Вот полный код над частью: <!DOCTYPE html> <html lang = "en"> <head> <base target = "_top"> <!-- Обязательные метатеги --> <meta charset = "utf- 8"> <meta name = "viewport" content = "width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link href = "cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstra‌​p.min.css" rel = "stylesheet" целостность = " sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDb‌​rCEXSU1oBoqyl2QvZ6jI‌​W3" crossorigin = "anonymous"> <?!= include("page-css"); ?> </head> <body> [часть начинается]

LeSmoox 05.04.2022 23:04
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
63
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вы можете попробовать использовать width: 100%; в контейнере изображения, display: flex;, чтобы сделать его отзывчивым, и justify-content: center;, чтобы центрировать изображение.

.row {
  }

  table {
    text-align: center;
  }  

  tr {
    line-height: 20px;
  }
  
  th, td {
    position:relative;
    text-align:center;
    vertical-align:middle;
  }

  img {
    display: block;
    vertical-align: center;
    position:absolute;
    height:20px;
  }
  
  .image_container {
    width: 100%;
    display: flex;
    justify-content: center;
  }
<!DOCTYPE html>
<html lang = "en">
  <head>
    <base target = "_top">
    <!-- Required meta tags -->
    <meta charset = "utf-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous">
    <?!= include("page-css"); ?>
  </head>
  <body>
  
    <div class = "container">
      <div class = "row" style = "width: 500px"> <!-- TABLE TEST -->
        <div > <!-- Test -->
          <table class = "table">
            <thead>
              <tr>
                  <th>Rank</th>
                  <th>Name</th>
                  <th>Points</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>1</td><td>
              <div class = "image_container">
              <img src = "https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></div></td><td>3</td></tr>
              <tr><td>11</td><td>
              <div class = "image_container">
              <img src = "https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></div></td><td>33</td></tr>
              <tr><td>111</td><td>
              <div class = "image_container">
              <img src = "https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></div></td><td>333</td></tr>
            </tbody>
          </table>
        </div> <!-- CLOSE TABLE TEST -->
      </div>
    </div>
  </body>

спасибо, я постараюсь лучше понять ваше решение и display: flex и, возможно, использовать его в будущем!

LeSmoox 05.04.2022 23:53

Я добавил небольшие изменения. Попробуйте эту часть кода разместить вместо вашего текущего css:

 tr {
    line-height: 20px;
    display: flex;
    flex-direction: row;
  }
  
  th, td {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  img {
    height:20px;
  }

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

спасибо, что касается комментария выше, я прочитаю о гибкости дисплея, чтобы понять, как его правильно использовать!

LeSmoox 05.04.2022 23:54

table {
    text-align: center;
  }  
  
  th, td {
    position: relative;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #ccc;
    min-width: 100px;
    font-size: 50px
  }

  img {
    display: inline-block; /* display should be inline or inline-block */
    vertical-align: middle; /* vertical align should be middle */
    position: relative; /* position should be relative */
    height: 20px;
  }
<div class = "row" style = "width: 600px"> <!-- TABLE TEST -->
          <!-- <div> loose open tag here -->
          <table class = "table">
            <thead>
              <tr>
                  <th>Rank</th>
                  <th>Name</th>
                  <th>Points</th>
              </tr>
            </thead>
            <tbody>
              <tr><td>1</td><td><img src = "https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td><td>3</td></tr>
              <tr><td>11</td><td><img src = "https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td><td>33</td></tr>
              <tr><td>111</td><td><img src = "https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td><td>333</td></tr>
            </tbody>
          </table>
        </div> <!-- CLOSE TABLE TEST -->

большое спасибо. отображение: встроенный блок; и положение: относительное; являются противоположностью решения, которое я читал в Интернете, мне придется прочитать об этом

LeSmoox 05.04.2022 23:57
Ответ принят как подходящий

Если сомневаетесь: упростите

Я добавил рамку вокруг вашего td, чтобы вы могли видеть эффекты

td {
  border: 1px solid red;
  text-align: center;
  height: 40px;
}

td>img {
  vertical-align: middle;
  max-height: 20px;
}
<div class = "row" style = "width: 500px">
  <!-- TABLE TEST -->
  <div>
    <!-- Test -->
    <table class = "table">
      <thead>
        <tr>
          <th>Rank</th>
          <th>Name</th>
          <th>Points</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td><img src = "https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td>
          <td>3</td>
        </tr>
        <tr>
          <td>11</td>
          <td><img src = "https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td>
          <td>33</td>
        </tr>
        <tr>
          <td>111</td>
          <td><img src = "https://static.sky.it/images/skytg24/it/spettacolo/serie-tv/2021/02/25/spongebob-serie-tv-kamp-koral/kamp.jpg"></td>
          <td>333</td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- CLOSE TABLE TEST -->

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

LeSmoox 05.04.2022 23:47

Чтобы это исправить, вам нужно удалить 2 стиля из тега в вашем CSS:

  • Дисплей:блок

  • Позиция:абсолютная

    .ряд { } Таблица { выравнивание текста: по центру; } тр { высота строки: 20 пикселей; } й, тд { должность: родственница; выравнивание текста: по центру; вертикальное выравнивание: посередине; } картинка { вертикальное выравнивание: по центру; высота: 20 пикселей; }

Другие вопросы по теме