вертикальное выравнивание и float

[hedgehog]

Здравствуйте. Столкнулся с проблемой вертикального выравнивания внутри таблицы. Задача: в одну ячейку поместить картинку и обтекающий ее текст, причем текст должен выравниваться посередине ячейки. но при добавлении картинке float: left происходит следующее: картинка выравнивается посередине, а текст - по верхней границы картинки. есть ли возможность реализовать нужное выравнивание без добавления дополнительных блоков или ячеек?

td {vertical-align: middle;border: solid 1px black;}
img {float: left;}

<table>
    <tr>
        <td> <img src="http://soft.mydiv.net/images/win/icons/TNT-Clip-Art-Library.gif">sometext</td>
    </tr>
</table>

[ceil100]

а можно ссылку?

[hedgehog]

а можно ссылку?

http://jsfiddle.net/mykM6/

забыл уточнить: текст может быть высотой одну или две строки. вот двухстрочный вариант: http://jsfiddle.net/KmgYN/

идея в том, чтобы в случае однострочного текста эта строка выравнивалась посередине картинки, а не по верхней границе

[Justnewone]

Задача не так проста, как может показаться.

Самое надежное - это вставлять картинку в бекграунд ячейке.

Чуть сложнее - 2 рядом стоящих TD.

Совсем сложнее - это текст оборачивать блоком (или блоками), в котором организовать выравнивание по вертикали через display:table-cell и экпрешны для IE, а ну и JS, чтобы синхронизировать высоту с высотой картинки, если необходимо.

UPD

Подумал и понял, про JS я погорячился, если картинка всегда больше текста по высоте, то оборачиваем и ее и текст в див с оверфлоу хидден, например, чтобы чувствовал высоту потомка с флоат, или еще как, к которому и применить то что выше написал.

UPD2

А может и не прокатит UPD пробовать надо.

[hedgehog]

Задача не так проста, как может показаться.

это я уже заметил

проблема в том, что это будет таблица с заголовками, которую сможет редактировать заказчик через админку сайта посредством wysiwyg редактора. человек далек от веб-технологий, поэтому разбитие этой ячейки на две, а, тем более, обертка в дополнительные блоки, сделает редактирование таблицы практически невозможной и мне после каждого чиха придется восстанавливать все из бекапа. вариант "таблица: картинка-обтекание-текст" - очень простой, потому что "как в MS Word", но вот с выравниванием - печаль

[Justnewone]

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

[hedgehog]

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

думаю, тут бы больше подошло отдельное редактирование каждого блока так как не хочется привязываться количеству полей, спасибо за наводку. что-то вроде: создать тип ноды с нужными полями (картинка-заголовок-тело) и выводить их (цмс: друпал 7)

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

[Justnewone]

в визвиге при неграмотном подходе очень просто наделать ненужных колспанов и роуспанов

[SelenIT]

Если ширина картинки и блока фиксирована, можно еще сделать через inline-block, типа такого.

[hedgehog]

в визвиге при неграмотном подходе очень просто наделать ненужных колспанов и роуспанов

А чем это грозит при блочной верстке, кроме расплывшейся таблицы в самой статье (ноде)? У меня выводимый в основном блоке контент обернут в overflow:hidden, поэтому за боковые границы ничего вылезти не должно. Поправьте, если я неправ.

Если ширина картинки и блока фиксирована, можно еще сделать через inline-block, типа такого.

Так-то оно так, но этот способ подходит, если выводить все блоки отдельными нодами на странице с отдельным типом документа. А в этом случае у меня проблем не возникнет как расположить их. Простая таблица нужна была только для предоставления возможности ее редактирования обычному пользователю в wysiwyg редакторе, а лишние обертки сделали бы этот процесс крайне трудоемким. В общем, заказчик настаивает на том, что эта страница редактироваться будет крайне редко, поэтому я пока что сделал таблицу сам. А если понадобится активно править контент на этой странице, то буду выводить отдельными нодами в блоках. К сожалению, отсутствие времени не позволило реализовать этот вариант сразу. Сама таблица выглядит примерно так, хоть это уже и не особо важно:

[x]заголовок                 [x]заголовок
стена текста стена текста    стена текста стена текста
стена текста стена текста    стена текста стена текста

[x]заголовок                 [x]заголовок
стена текста стена текста    стена текста стена текста
стена текста стена текста    стена текста стена текста

...повторить до потери пульса...

где [x] - картинка.

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

[hedgehog]

посыпаю голову пеплом. печаль-распечальная. все оказалось очень просто:

http://jsfiddle.net/hedgehog/EuAwR/

для умерших браузеров, как я понимаю, нужно указывать display: inline и zoom: 1

Edited November 3, 2011 by hedgehog

[psywalker]

посыпаю голову пеплом. печаль-распечальная. все оказалось очень просто:

http://jsfiddle.net/hedgehog/EuAwR/

для умерших браузеров, как я понимаю, нужно указывать display: inline и zoom: 1

Это же таблица? Зачем там что-то кому-то указывать?

А если ты про span, то это строчный элемент, должен и без костылей пахать.

[hedgehog]

Это же таблица? Зачем там что-то кому-то указывать?

А если ты про span, то это строчный элемент, должен и без костылей пахать.

нужно в одной ячейке разместить картинку и текст, который обтекает эту картинку по правой стороне. все должно выравниваться посередине, а текст может быть либо одно- либо двухстрочный. если картинку и span просто выравнивать по вертикали, то все отлично с однострочным текстом, а если появляется вторая строка, то она переносится под картинку: http://jsfiddle.net/hedgehog/VqQA9/

с другой стороны, если картинке задать флоат, то с двустрочным вариантом все отлично, потому что спан выравнивается по верхней границе картинки и благодаря размеру шрифта/междустрочному интервалу две строки отображаются как будто посередине. а заголовок в одну строку выглядит так: http://jsfiddle.net/hedgehog/arauJ/

буду рад, если подскажете бескостыльный вариант.

Edited November 3, 2011 by hedgehog

[psywalker]

так не пойдёт?

http://jsfiddle.net/VqQA9/1/

[hedgehog]

так не пойдёт?

http://jsfiddle.net/VqQA9/1/

посмотрите, что происходит, если текст в одну строку: http://jsfiddle.net/hedgehog/HQpP4/

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

[psywalker]

А если сделать две ячейки?

[hedgehog]

А если сделать две ячейки?

если две ячейки, то очень громоздкий код получается. таблица примерно такая, только шире и "блоков" по вертикали не два, а несколько десятков. по-моему, тут гораздо проще подсунуть костыль через span inline-block, тем более в этом случае можно будет дать пользователю возможность редактировать код через wyswiwyg (span'ами редактор изменяет цвет/вес текста). только тогда надо будет задавать стили чем-то вроде img + span, чтобы не трогать текст в ячейках под заголовками...

[psywalker]

А так?

http://jsfiddle.net/HQpP4/3/

[hedgehog]

А так?

http://jsfiddle.net/HQpP4/3/

Вы обернули текст и картинку в обычный блок, к которому вертикальное выравнивание неприменимо. Т.е. текст не выравнивается и если его уменьшить до одной строки, то он все равно будет по верхнюю границу картинки. Можно присвоить блоку display: inline/table-cell/inline-block, но мы получаем тот же поведение, как при флоат-картинке внутри ячейки, т.е. возвращаемся к исходной точке, но с лишними элементами. Вероятно, я не очень внятно объяснил задачу. Вот рабочий вариант с "костылем" в виде display: inline-block для span, как я показывал выше: http://jsfiddle.net/hedgehog/cVJTM/

То есть, как видно из таблицы, в ячейке с картинкой может быть либо двустрочный, либо однострочный заголовок и в обоих случаях текст должен выравниваться посередине вертикально. Заранее предугадать, одна будет строка или две, нельзя. Применение оберток кроме span/p крайне нежелательно, равно как и злоупотребление ими. В принципе, временное решение без захламления кода кучей стилей (как в варианте с бекграундом) и без разделение ячеек найдено. Весь этот сыр-бор затевался ради возможности редактирования этой таблицы пользователем. В общем, сейчас ситуация получилась немного запутанной и без нужды не хочется трогать то, что уже работает, а дальнейшие поиски "бескостыльного" варианта интересны, в первую очередь, в образовательных целях. Все-таки опыта у меня никакого, а хочется знать, что делать в тех или иных ситуациях.

Edited November 3, 2011 by hedgehog

[psywalker]

А так?

http://jsfiddle.net/HQpP4/4/

Хотя ща увидел, что ты такой же вариант сделал. Но не пойму, почему это костыль?

[Justnewone]

в визвиге при неграмотном подходе очень просто наделать ненужных колспанов и роуспанов

А чем это грозит при блочной верстке, кроме расплывшейся таблицы в самой статье (ноде)? У меня выводимый в основном блоке контент обернут в overflow:hidden, поэтому за боковые границы ничего вылезти не должно. Поправьте, если я неправ.

Если сама по себе разъехавшаяся таблица не настораживает, тогда нет, ничем.

[borus]

в визвиге при неграмотном подходе очень просто наделать ненужных колспанов и роуспанов :)/>

А чем это грозит при блочной верстке, кроме расплывшейся таблицы в самой статье (ноде)? У меня выводимый в основном блоке контент обернут в overflow:hidden, поэтому за боковые границы ничего вылезти не должно. Поправьте, если я неправ.

Если сама по себе разъехавшаяся таблица не настораживает, тогда нет, ничем.

здравствуйте. похоже у меня похожая ситуация - float+вертикальное выравнивание. только на блоках (меню по центру, а картинка 38 лет задирается вверх).

пробовал в разных вариантах с display, vertical-align, но не хватает понимания.

Прошу помочь разобраться.

[psywalker]

в визвиге при неграмотном подходе очень просто наделать ненужных колспанов и роуспанов :)/>/>

А чем это грозит при блочной верстке, кроме расплывшейся таблицы в самой статье (ноде)? У меня выводимый в основном блоке контент обернут в overflow:hidden, поэтому за боковые границы ничего вылезти не должно. Поправьте, если я неправ.

Если сама по себе разъехавшаяся таблица не настораживает, тогда нет, ничем.

здравствуйте. похоже у меня похожая ситуация - float+вертикальное выравнивание. только на блоках (меню по центру, а картинка 38 лет задирается вверх).

пробовал в разных вариантах с display, vertical-align, но не хватает понимания.

Прошу помочь разобраться.

Поиграйся со стилями.

#topnav .moduletable {
    display: inline-block;
    vertical-align: middle;
}

#experience {
    display: inline-block;
    text-align: right;
    vertical-align: middle;
    width: 450px;
}

#experience a {
    background: url("../images/38.png") no-repeat scroll 0 0 transparent;
    display: inline-block;
    height: 23px;
    width: 225px;
}

[borus]

Поиграйся со стилями.

Благодарю. Я думал, что vertical-align только в таблицах работает. Теперь знаю

[borus]

Здравствуйте.

Новый сайт, новая задача - отцентрировать изображение в div id="logo" относительно #header. Могли бы вы сказать, почему не срабатывает vertical-align:middle?

Edited March 23, 2013 by borus

[Justnewone]

Есть 2 вертикальных выравнивания.

Для таблиц оно выравнивает содержимое ячейки.

Для строчных - выравнивание относительно текущей линейки строки.

Блочный элемент это свойство не выполнит.