Как разместить изображение поверх и по центру таблицы?

D
На сайте с 01.09.2015
Offline
59
330

Здравствуйте. Помогите, пожалуйста. Имеется таблица и изображение. Нужно чтобы изображение размещалось поверх таблицы и точно по центру этой таблицы.

Пример простейшей таблицы:


<table border="1">
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
</table>

Пример изображения:


<img src="https://fsd.multiurok.ru/html/2019/02/04/s_5c57eebe8d949/1075492_11.png">
sochi-russia
На сайте с 06.01.2012
Offline
134
#1
Digistive:
Здравствуйте. Помогите, пожалуйста. Имеется таблица и изображение. Нужно чтобы изображение размещалось поверх таблицы и точно по центру этой таблицы.

Пример простейшей таблицы:


<table border="1">
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
</table>


Пример изображения:


<img src="https://fsd.multiurok.ru/html/2019/02/04/s_5c57eebe8d949/1075492_11.png">

Это как поверх, непонятно

Хостинг от 6руб в день! https://clck.ru/Rk2P5 Хостинг + Домен в подарок https://clck.ru/Rk2P5 Хостинг - Скидки при оплате за год https://clck.ru/Rk2P5 Хостинг - Месяц в подарок https://clck.ru/Rk2P5
S
На сайте с 30.09.2016
Offline
469
#2
sochi-russia:
Это как поверх, непонятно

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

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
ArbNet
На сайте с 27.10.2019
Offline
75
#3


<table border="1" width=50% align=center>
<caption>
<img src="https://fsd.multiurok.ru/html/2019/02/04/s_5c57eebe8d949/1075492_11.png">
</caption>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
</table>

🤪

Блажен, кто не стремится сделать лучше: он не рискует быть не понятым.
S
На сайте с 30.09.2016
Offline
469
#4
ArbNet:
🤪

Пожалуй, процитированная часть – наиболее уместная.

[Удален]
#5
Sitealert:
Пожалуй, процитированная часть – наиболее уместная.

Смайлики вообще нужно запретить!

Ведь все серьёзные переписки и документы прекрасно обходятся без них.

D
На сайте с 01.09.2015
Offline
59
#6
sochi-russia:
Это как поверх, непонятно

Вот так - https://prnt.sc/qttk0e

ArbNet
На сайте с 27.10.2019
Offline
75
#7


<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
</head>
<style>
.case1 {
width: 700px;
height: 500px;
margin: 0 auto;
position: relative;
}
.tabl {
width: 100%;
height: 100%;
}
.case2{
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.sova {
flex: 0 0 auto;
}
</style>
<body>
<div class=case1>
<table border="1" class=tabl>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
<tr>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
<td>ячейка</td>
</tr>
</table>
<div class=case2>
<img class=sova src="https://fsd.multiurok.ru/html/2019/02/04/s_5c57eebe8d949/1075492_11.png">
</div>
</div>
</body>
</html>

🤣

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий