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

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

Блок 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, создай внутри 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>

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

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

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

Это надёжней. :)

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

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

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

почти получилось :). Однако правая картинка (<div style="float:right;") смещается вниз и на попытки задать ей position не реагирует.ломает макет страницы

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

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

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

Благодарю всех участников обсуждения:)!
Вариант, предложенный 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>