CSS выравнивание элементов

[maaxiim]

Подскажите, пожалуйста, начинающему вебмастеру...

Блок div содержит текст, таблички и т. д. Нужно разместить внутри блока три картинки горизонтально, но так, чтобы левая прижималась к левой границе блока, правая, соответственно к правой, а центральная была между ними посередине.

Пробовал различные варианты, например, картинки поместить в еще один div и задать центральной картинке фиксированный (в px) padding left, right, но в разных браузерах отображается по-разному. Может быть есть какое-нибудь более изящное решение вопроса?

[Костэн]

maaxiim, может это поможет :

<p align = left><img src="image1"></p><p align = center><img src="image2"></p><p align = right><img src="image3"></p>

[maaxiim]

Костэн, нет, это не поможет. Р - это же абзац. Соответственно каждый новый абзац будет ниже предыдущего, а нужно в один ряд.

[Костэн]

maaxiim, создай внутри div таблицу, в которой будут рисунки.
<div>
<table width=100% border=0>
<tr>
<td align=left><img src="image1"></td><td align=center><img src="image2"></td><td align=right><img src="image3"></td>
</tr>
</table>
</div>

[Coutty]

Например, так:

<div style="width:100%">
<div style="float:left; position:absolute; top:0; width:100%"><img src="1.jpg" /></div><div style="text-align:center; top:0; position:absolute; width:100%"><img src="1.jpg" /></div><div style="float:right"><img src="1.jpg" /></div>
</div>


Но я чувствую, что это неверный подход:)

[Sham]

imho таблички самый надежный вариант... подозреваю, что вариант Coutty не вполне кроссбраузерный...

[Coutty]

Sham, я ещё потом заметил, что даже в Опере оно не совсем на одной линии отображается. Правая картинка чуть ниже (где-то на 10 пкс).
Поддержу таблички:) Хоть это и не относится к CSS, но тут важнее цель, а не средство.

[Костэн]

Хоть это и не относится к CSS, но тут важнее цель, а не средство. »
Это надёжней. :)

[maaxiim]

Таблички, конечно же, надежней, но неужели нельзя решить этот, в общем-то, несложный вопрос таким мощным средством, как CSS?
Но я чувствую, что это неверный подход » подход, действительно, неверныйposition:absolute; top:0; » позиционирует картинки в самом верху окна браузера.width:100% » растягивает блок картинки на всю ширину предыдущего блока.

Эксперименты продолжаются :), так что, если у кого-нибудь появятся идеи именно по CSS, буду рад.

[Busla]

чтобы отцентрировать картинку можно родительскому элементу задать text-align: center
либо переопределяем картинку {display: block; position: relative; left: 50%; margin-left: минус половина ширины картинки}
боковые делаем float;
как вариант, можно картинку запихать в background какого-нибудь элемента

[maaxiim]

чтобы отцентрировать картинку можно родительскому элементу задать text-align: center »почти получилось :). Однако правая картинка (<div style="float:right;") смещается вниз и на попытки задать ей position не реагирует.либо переопределяем картинку {display: block; position: relative; left: 50%; margin-left: минус половина ширины картинки} »ломает макет страницы

[Костэн]

maaxiim, что тебе загорелся так этот CSS ? Тебе уже дали решение твоей проблеммы более простым способом...

[maaxiim]

Костэн, я, наверно, не совсем точно сформулировал свою мысль. Картинки я вставил в табличку, так, как ты и предложил, но я сейчас вплотную изучаю CSS и, поэтому вопрос не только практический, но и теоретический. И, к тому же, т.к. на сайте это используется не один раз, целесообразно было бы централизованно описать это в файле стилей.

[Busla]

ломает макет страницы »не должно бы...
а зачем правой картинке position? чтобы правая картинка не смещалась вниз - она должна идти в коде до центральной

[maaxiim]

Благодарю всех участников обсуждения:)!
Вариант, предложенный Busla, решил вопрос.
Может кому-нибудь пригодится:

<div style="text-align:center">
<div style="float:left"><img src="mg_1.jpg" border="0"></div>
<div style="float:right"><img src="img_3.jpg" border="0"></div>
<img src="img_2.jpg" border="0">
</div>