картинка по центру в фиксированном блоке

[Tmin10]

Есть: http://tmin10.net.ru/1.html.

Нужно, чтобы картинка была по центру <div id='add'> по вертикали и горизонтали.

По горизонтали помогает margin: auto;, а как по вертикали?

Edited February 18, 2011 by Tmin10

[mynameisharry]

сложновато понять твою задачу.

ты хочешь чтобы картинка была по центру твоего серого блока и по вертикали и по горизонтали?

[swetlana]

опять лишний мудрёж.

display: table-cell не работает при float: right.

Заданные <img> стили не объясняются с позиций здравого смысла. Лишний <div> тоже.

Лучше скажите честно: картинка несёт исключительно декоративный смысл?

Тогда можно так:

<style>
#head {
height: 40px;
background: gray url(document-new.png) right center no-repeat;
}
</style>
<div id="head"></div>

[Tmin10]

Сейчас допишу код и всё станет понятно, картинку я предполагал использовать в качестве ссылки на добавление записи.

[swetlana]

Тогда:

<style>
#head {
display: table-cell;
vertical-align: middle;
height: 40px;
background: gray;
}
</style>
<div id="head"><a href="add.asm"><img src="document-new.png " /></div>

В любом случае: чем меньше кода, тем проще им управлять.

[Tmin10]

Вот, посмотрите: http://tmin10.net.ru/1.html.

Всё вроде нормально, но картинка прижата к верху.

Также пытался сделать изменение фона у кнопок при наведении мыши, но тоже что то не работает...

[swetlana]

Есть такой способ выравнивания по вертикали:

display: table-cell; vertical-align: middle;

Вы им и пытались воспользоваться.

Но при заданном float не работает display: table-cell. Display становится block. А у него уже не работает vertical-align.

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

[Tmin10]

Ок, а как быть с кнопками?

Кстати, там видно, что текст в кнопке не по центру, можно его как то сместить?

Да и вот ещё: IE обвёл картинку противной синей рамочкой, как с этим бороться?

Edited February 20, 2011 by Tmin10

[swetlana]

Ок, а как быть с кнопками?

Кстати, там видно, что текст в кнопке не по центру, можно его как то сместить?

line-height: 30px;

Да и вот ещё: IE обвёл картинку противной синей рамочкой, как с этим бороться?

img { border: none; }

[Tmin10]

спасибо большое, пока всё работает!

Кстати, а приложение для Вконтакте лучше выполнять в голубоватых тонах или разницы нет?

[avtomastersu]

swetlana, у меня тоже самое- синяя рамка в некоторых модулях в IE7, в остальных браузерах норм. Так

img { border: none; }

где править в шаблоне template.css ?

[swetlana]

В примере я вижу встроенные стили, без внешних файлов.

В общем, где стили задаются, там и надо.

[avtomastersu]

Если что то где то болит, при невозможности лечения, его просто удаляют Пришлось сменить шаблон (был в запасе)и все заработало