Помощник
|
Выравнивание изображения по центру блока |
Andy Superstar
|
Сообщение
#1
|
||
|
|
||
|
|||
Webmaster_hb |
21.7.2008, 15:53;
Ответить: Webmaster_hb
Сообщение
#2
|
|
о каком блоке идёт речь?
<div align="center"> уже не подходит ? |
|
|
Andy Superstar
|
Сообщение
#3
|
|
Я думал, такое объяснять не стоит.
Есть блок одинаковой ширины и высоты, надо чтобы изображение внутри выравнивалось по центру по горизонтали и вертикали в независимости от размера самого изображения. (подразумевается, что ширина/высота постоянно меньше заданной фиксированно ширины/высоты блока) |
|
|
Webmaster_hb |
21.7.2008, 16:18;
Ответить: Webmaster_hb
Сообщение
#4
|
|
<div class="greenBorder" style="display: table; #position: relative; overflow: hidden; border: 1px dashed red; color: red; height:300px; width:500px; ">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;"> <div class="greenBorder" style=" #position: relative; #top: -50%"> text </div> </div> </div> |
|
|
Andy Superstar
|
Сообщение
#5
|
|
Так выравнивает именно изображение по вертикали в Opera, Firefox и IE, но по горизонтали изображение выравнивается влево во всех браузерах.
Попробывал добавить в стили вот такое body { text-align:center; /* ключевое */ margin:0; padding:0; } Стало выравнивать по горизонтали и вертикали в Opera и Firefox идеально. Но это не совсем правильно и в IE7 выравнивает как бы на 75%, а не по центру. Смотрите скрин. [IMG]http://img113.imageshack.us/img113/3443/20080721153336yu7.jpg[/IMG] Нужен какой-то фикс в IE или другой код рабочий во всех браузерах одинаково. |
|
|
Webmaster_hb |
21.7.2008, 17:19;
Ответить: Webmaster_hb
Сообщение
#6
|
|
<div style="display: table; #position: relative; overflow: hidden; border: 1px dashed red; color: red; height:300px; width:500px; text-align:center">
<div style=" #position: absolute; #top: 50%; display: table-cell; vertical-align: middle; "> <div style=" #position: relative; #top: -50%; #left: -50%"> text </div> </div> </div> |
|
|
Andy Superstar
|
Сообщение
#7
|
|
Opera 9.51, Firefox 3, IE7 последний код обрабатывают нормально! Благодарю, то что надо! Весь нет облазил, ничего не нашёл, чтобы во всех браузерах корректно работало.
|
|
|
Andy Superstar
|
Сообщение
#8
|
|
Ещё кстати вот такое нашёл, для выравнивания неограниченного количества изображений в общем блоке:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" type="text/css" href="css/main.css" media="all"/> <style type="text/css"> h1 { text-align: center; } #outer { border: 1px solid #ccc; padding: 20px; text-align: center; } img { display: -moz-inline-box; display: inline-table; display: inline-block; margin: 15px; height: auto; overflow: visible; vertical-align: middle; border: 2px solid #f0f0f0; } </style> <!--[if lt IE 8]> <style type="text/css"> img{height: 0;he\ight: auto;display: inline;} </style> <![endif]--><title>aligning</title> </head> <body> <h1>Выравнивание изображений по вертикали и горизонтали</h1> <div id="outer"> <img src="small.jpg" alt="small"/><img src="big.jpg" alt="small"/><img src="small.jpg" alt="small"/> </div> </body> </html> Как работает смотрим на странице http://tapazukk.net/example/vertical/ |
|
|
Andy Superstar
|
Сообщение
#9
|
|
Webmaster
Кстати, хак, который привели вы имеет какие-то проблемы в IE6, IE8? У меня IE7 установлен, физически проверить не могу. |
|
|
Webmaster_hb |
22.7.2008, 10:45;
Ответить: Webmaster_hb
Сообщение
#10
|
|
у меня тоже IE7, на других версиях не проверял
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Выравнивание картинки по центру между текстом | 10 | NikN | 2637 | 6.1.2021, 23:24 автор: buypushplatform |
|
Отображение нужного блока при клике. | 0 | bhtml | 1668 | 10.7.2020, 15:18 автор: -bhtml- |
|
Выравнивание содержимого footer'a | 0 | press74 | 4997 | 2.7.2019, 18:58 автор: -iiwanc- |
|
Изображения с shutterstock от 15 рублей/штука | 5 | Mr_Big | 3669 | 10.9.2017, 21:30 автор: Palundra |
|
Вывод изображения при наведения на часть картинки по area | 1 | androv77 | 4837 | 16.7.2016, 17:32 автор: -YroKPROG- |
Текстовая версия | Сейчас: 20.4.2024, 7:17 |