ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как спозиционировать блок переменной ширины и высоты по центру родителя?
6 сообщений из 6, страница 1 из 1
Как спозиционировать блок переменной ширины и высоты по центру родителя?
    #38674213
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Есть такая конструкция:
Код: html
1.
<span class="icon"><span class="img">||||</class><span class="lbl"></span></span>


Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
.icon
{
	position: relative;
	white-space: nowrap;
	text-align: center;
}
.icon .img
{
	color: #eee;
}
.icon .lbl
{
	position: absolute;
	font-size: 65%;
	font-weight: bold;
	left: 50%;
	top: 50%;
}



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

________________________
Мы смотрим с оптимизмом...
...в оптический прицел.
...
Рейтинг: 0 / 0
19.06.2014, 13:04
| Ответить | Цитировать | Написать  
Как спозиционировать блок переменной ширины и высоты по центру родителя?
    #38674223
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
JavaScript-ом определить ширину и высоту и выставить соответсвующие отрицательные margin-left и margin-top.
...
Рейтинг: 0 / 0
19.06.2014, 13:10
| Ответить | Цитировать | Написать  
Как спозиционировать блок переменной ширины и высоты по центру родителя?
    #38674253
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Решил таким способом.
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
.icon .lbl
{
	position: absolute;
	font-size: 65%;
	font-weight: bold;
	top: 0.5em;
	left: 0;
	width: 100%;
	text-align: center;
}
...
Рейтинг: 0 / 0
19.06.2014, 13:25
| Ответить | Цитировать | Написать  
Как спозиционировать блок переменной ширины и высоты по центру родителя?
    #38674930
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Alibek B.Решил таким способом.
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
.icon .lbl
{
	position: absolute;
	font-size: 65%;
	font-weight: bold;
	top: 0.5em;
	left: 0;
	width: 100%;
	text-align: center;
}


Решение "по высоте" просто радикальное!
...
Рейтинг: 0 / 0
20.06.2014, 08:36
| Ответить | Цитировать | Написать  
Как спозиционировать блок переменной ширины и высоты по центру родителя?
    #38674984
Alibek B
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Alibek B
Участник
Ну мне для внутреннего пользования.
У меня элемент высотой всегда в одну строку, а простого центрования по высоте я не нашел.
...
Рейтинг: 0 / 0
20.06.2014, 09:37
| Ответить | Цитировать | Написать  
Как спозиционировать блок переменной ширины и высоты по центру родителя?
    #38675045
Фотография skyANA
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
skyANA
Участник
Alibek B.Ну мне для внутреннего пользования.
У меня элемент высотой всегда в одну строку...А в заголовке написали: "блок переменной ширины и высоты ".

Также можно переделать вёрстку и использовать
Код: css
1.
2.
display: table-cell;
vertical-align: middle;
...
Рейтинг: 0 / 0
20.06.2014, 10:26
| Ответить | Цитировать | Написать  
6 сообщений из 6, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как спозиционировать блок переменной ширины и высоты по центру родителя?
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=97&tid=1446980]:
 0ms
get settings:
 8ms
get forum list:
 13ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 50ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 37ms
get tp. blocked users:
 1ms
others: 232ms
total:  356ms
созд. / загр.: 356ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]