Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 23.05.2018, 11:31   #1
kamikadzedead
Новичок
Джуниор
 
Регистрация: 23.05.2018
Сообщений: 2
Печаль После центрирования фиксированного блока по центру экрана не видно его текст

Мне необходимо сделать хорошее центрирование всплывающего блока по центру экрана которое будет работать даже в старых браузерах, я выбрал 4-й метод отсюда https://habr.com/post/238449/
Вот часть кода html:
Код:
                        <div id="hiddenBlockSignIn" class="hiddenBlock">
				<div class="contentHiddenBlock">
					<p>Текст</p>
				</div>
			</div>
			<button onclick="showSignIn()">Вход</button>
Вот js:
Код:
function showSignIn() {
	var b = document.getElementById('hiddenBlockSignIn');
	b.style.display = 'block';
}
Вот реализация на css:
Код:
.hiddenBlock {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    white-space: nowrap;
    text-align: center;
    font-size: 0;
}
.hiddenBlock:before {
	height: 100%;
    display: inline-block;
    vertical-align: middle;
    content: '';
}

.contentHiddenBlock {
	display: inline-block;
    white-space: normal;
    vertical-align: middle;
    text-align: left;
}
.contentHiddenBlock p {
	display: block;
}
В результате я ничего не увидел, но вот если изменить css так:
Код:
.contentHiddenBlock img {
	display: block;
}
И вместо p поставить img:
Код:
<img src="https://hsto.org/files/50f/7b2/1cc/50f7b21ccabd4b20bc0369f228138b5b.jpg">
То картинка видна! Нужно чтобы любой эленмент был виден, а не только картинки

Последний раз редактировалось kamikadzedead; 23.05.2018 в 11:33. Причина: ФОРМАТИНГ
kamikadzedead вне форума Ответить с цитированием
Старый 23.05.2018, 11:50   #2
Javany
Пользователь
 
Регистрация: 15.05.2018
Сообщений: 75
По умолчанию

Цитата:
Сообщение от kamikadzedead Посмотреть сообщение
font-size: 0;
У вас размер шрифта 0 пикселей стоит, поэтому и текст не видно.
У меня конечно опыта маловато, но мне кажется способ весьма замудренный.
Не задавай вопрос, если не знаешь что делать с ответом...

Последний раз редактировалось Javany; 23.05.2018 в 12:09.
Javany вне форума Ответить с цитированием
Старый 23.05.2018, 12:00   #3
Stanislav
Квадрокоптерист
Участник клуба Подтвердите свой е-майл
 
Регистрация: 29.09.2007
Сообщений: 1,824
По умолчанию

Javany сделал мой день ))
Я часть той силы, что вечно хочет зла, но вечно совершает благо..
Stanislav вне форума Ответить с цитированием
Старый 23.05.2018, 12:25   #4
Javany
Пользователь
 
Регистрация: 15.05.2018
Сообщений: 75
По умолчанию

Посмотрел методы по вашей ссылочке. Знаете что меня удивило? Автор статьи пишет
Цитата:
Минусом данного способ является жёсткое задание размеров.
Вопрос. А что мешает тут
Код:
   
 width: 250px;
 height: 250px
использовать "vw" и "vh" вместо "px"? Ну или проценты в крайнем случае.
Не задавай вопрос, если не знаешь что делать с ответом...
Javany вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Установка блока, имеющего свойство position: relative, по центру. Bulat Ibrahim JavaScript, Ajax 1 24.02.2017 10:36
Выравнивание блока элементов по центру prukon HTML и CSS 2 15.12.2016 21:04
Как при блочной верстке разместить текст по центру блока? Michael_Ardan HTML и CSS 4 29.08.2013 14:07
окно по центру экрана (delphi) Merano Win Api 7 01.08.2012 10:17
Позиционирование блока по центру с динамическими элементами и их гибкостью *сложно AlienNation JavaScript, Ajax 0 22.10.2011 03:55