Форум Сайтостроение Веб-строительство

[HTML, CSS] Вравнивание элемента по верткали.

12
DavyJohnes
На сайте с 05.01.2011
Offline
84
DavyJohnes
890 


<div>

 <img src="какое_то_изображение.png">

 <span style="float:right; vertical-align: middle;">Какой то текст</span>

</div>

Задача: выровнять текст по вертикали, по середине родительского <div>. Ни как не получается это сделать. В чем проблема?

P.S.: Гуглил, пробовал разные варианты:

position:relative;

display:inline; (хотя span и так является inline)

Ничего не помогает.

https://handy-tools.io (https://handy-tools.io) - Набор полезных утилит для всех!
S5
На сайте с 04.01.2010
Offline
77
sg552
#1

display:table-cell;

vertical-align:middle;

float-ы все убираем

DavyJohnes
На сайте с 05.01.2011
Offline
84
DavyJohnes
#2
sg552:
display:table-cell;
vertical-align:middle;
float-ы все убираем

Ну так при всем при этом мне необходимо прибить элемент к правому краю, как это сделать без флоата?

S5
На сайте с 04.01.2010
Offline
77
sg552
#3

text-align:right;

position:relative;

не вариант?)

DavyJohnes
На сайте с 05.01.2011
Offline
84
DavyJohnes
#4
sg552:
text-align:right;
position:relative;
не вариант?)

Спасибо, попробую. А если в качестве объекта исследования взять не span с текстом а картинку какую-нибудь ? text-align ведь на него не распространяется.

dkameleon
На сайте с 09.12.2005
Offline
386
dkameleon
#5
DavyJohnes:
Ничего не помогает.

а как вы конфликт с картинкой решаете-то?

не вижу, чтобы дивке была задана высота.

картинка произвольная.

да и у спана не задано позиционирование.

больше вопросов чем ответов.

может проще описать желаемый результат?

Дизайн интерьера (http://balabukha.com/)
Google не будет раскрывать Google Webmaster Group ответит Google: изменение анкорного текста
DavyJohnes
На сайте с 05.01.2011
Offline
84
DavyJohnes
#6
dkameleon:
а как вы конфликт с картинкой решаете-то?
не вижу, чтобы дивке была задана высота.
картинка произвольная.
да и у спана не задано позиционирование.
больше вопросов чем ответов.

может проще описать желаемый результат?

- Имеется div без всяческих параметров.

- Имеется произвольное по размерам изображение изображение, которое должно быть расположено в левой части div.

- имеется span с текстом внутри, который должен быть в правой части div.

Очевидно что div расширяется в зависимости от размеров изображения.

Задача: центрировать по вертикали текст.

[css, img] Автоматическое изменение Выравнивание по вертикали в Автоматическая высота DIVа =
[Удален]
#7

класс присвойте

накрайняк !important всандалить... ))

Kartinka2008
На сайте с 13.04.2009
Offline
65
Kartinka2008
#8

DavyJohnes, а если объекту присвоить: {margin: auto 0; display: block;}?

Для горизонтального выравнивания margin: 0 auto - работает, может и для вертикального сработает. Я не пробовал, если чо. :)

Календар вагітності (http://40weeks.com.ua/) по тижнях і місяцях. Поради експертів.
vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#9

Принципиально использовать div?

Попробуйте таблицей сделать. а там уже vertical-align:middle;

Кстати тоже пришла такая идея как Kartinka2008, попробуйте такое решение.

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
DavyJohnes
На сайте с 05.01.2011
Offline
84
DavyJohnes
#10
Kartinka2008:
DavyJohnes, а если объекту присвоить: {margin: auto 0; display: block;}?

Для горизонтального выравнивания margin: 0 auto - работает, может и для вертикального сработает. Я не пробовал, если чо. :)

Пробовал, не работает.

---------- Добавлено 23.07.2012 в 20:14 ----------

vlad00777:
Принципиально использовать div?
Попробуйте таблицей сделать. а там уже vertical-align:middle;

Кстати тоже пришла такая идея как Kartinka2008, попробуйте такое решение.


div принципиально
12

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий