поэтому я создаю веб-приложение с помощью скрипта 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 -->
Я пробовал то, что нашел: отображение: блок, положение: относительное для родителей, абсолютное для детей и несколько других решений, но, похоже, ничего не работает. Я явно что-то упускаю, и я, вероятно, так много испортил стили, что даже мог попробовать хорошее решение, которое могло быть заблокировано другими ошибками.
Спасибо может кто поможет
вам нужно поместить css и html в один фрагмент
@ Бармар? Я новичок в html, только изучаю его прямо сейчас, я не знаю, что такое инспектор DOM, я попытаюсь найти его, спасибо.
Это вкладка «Элементы» инструментов разработчика в Chrome.
@fnostro я только что сделал копию части кода, я просто не мог вставить его полностью, но кроме этой самой проблемы, все остальные стили работают нормально.
Вот полный код над частью: <!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/bootstrap.min.css" rel = "stylesheet" целостность = " sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin = "anonymous"> <?!= include("page-css"); ?> </head> <body> [часть начинается]
Вы можете попробовать использовать 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 и, возможно, использовать его в будущем!
Я добавил небольшие изменения. Попробуйте эту часть кода разместить вместо вашего текущего 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;
}
Надеюсь, поможет!
спасибо, что касается комментария выше, я прочитаю о гибкости дисплея, чтобы понять, как его правильно использовать!
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 -->
большое спасибо. отображение: встроенный блок; и положение: относительное; являются противоположностью решения, которое я читал в Интернете, мне придется прочитать об этом
Если сомневаетесь: упростите
Я добавил рамку вокруг вашего 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 -->
Большое спасибо, это сработало! Я использовал ваше решение, потому что оно было ближе всего к коду, который у меня был, и выглядело проще.
Чтобы это исправить, вам нужно удалить 2 стиля из тега в вашем CSS:
Дисплей:блок
Позиция:абсолютная
.ряд { } Таблица { выравнивание текста: по центру; } тр { высота строки: 20 пикселей; } й, тд { должность: родственница; выравнивание текста: по центру; вертикальное выравнивание: посередине; } картинка { вертикальное выравнивание: по центру; высота: 20 пикселей; }
Вы пытались изучить его в инспекторе DOM, чтобы увидеть, что такое ограничивающая рамка изображения?