X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Выравнивание изображения по центру блока
Andy Superstar
Andy Superstar
Topic Starter сообщение 21.7.2008, 15:24; Ответить: Andy Superstar
Сообщение #1


Стандартного решения, как говорит Google для связки браузеров IE vs Opera/Firefox нет.

Кто что выбрал использовать для решения центрирования изображения в блоке?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 21.7.2008, 15:53; Ответить: Webmaster_hb
Сообщение #2


о каком блоке идёт речь?
<div align="center"> уже не подходит ?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Andy Superstar
Andy Superstar
Topic Starter сообщение 21.7.2008, 15:58; Ответить: Andy Superstar
Сообщение #3


Я думал, такое объяснять не стоит.

Есть блок одинаковой ширины и высоты, надо чтобы изображение внутри выравнивалось по центру по горизонтали и вертикали в независимости от размера самого изображения. (подразумевается, что ширина/высота постоянно меньше заданной фиксированно ширины/высоты блока)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
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
Andy Superstar
Topic Starter сообщение 21.7.2008, 16:40; Ответить: 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
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
Andy Superstar
Topic Starter сообщение 21.7.2008, 17:24; Ответить: Andy Superstar
Сообщение #7


Opera 9.51, Firefox 3, IE7 последний код обрабатывают нормально! Благодарю, то что надо! Весь нет облазил, ничего не нашёл, чтобы во всех браузерах корректно работало.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Andy Superstar
Andy Superstar
Topic Starter сообщение 21.7.2008, 23:58; Ответить: 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
Andy Superstar
Topic Starter сообщение 22.7.2008, 3:46; Ответить: Andy Superstar
Сообщение #9


Webmaster

Кстати, хак, который привели вы имеет какие-то проблемы в IE6, IE8?

У меня IE7 установлен, физически проверить не могу.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 22.7.2008, 10:45; Ответить: Webmaster_hb
Сообщение #10


у меня тоже IE7, на других версиях не проверял
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыТип изображения в Gutenberg по умолчанию. Как установить?
2 mRelby 518 20.2.2021, 20:47
автор: mRelby
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыВыравнивание картинки по центру между текстом
10 NikN 1689 6.1.2021, 23:24
автор: buypushplatform
Открытая тема (нет новых ответов) Отображение нужного блока при клике.
0 bhtml 907 10.7.2020, 15:18
автор: -bhtml-
Открытая тема (нет новых ответов) Выравнивание содержимого footer'a
0 press74 2081 2.7.2019, 18:58
автор: -iiwanc-
Открытая тема (нет новых ответов) Изображения с shutterstock от 15 рублей/штука
5 Mr_Big 2715 10.9.2017, 21:30
автор: Palundra


 



RSS Текстовая версия Сейчас: 16.4.2021, 2:22
Дизайн