Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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

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

Мне необходимо сделать хорошее центрирование всплывающего блока по центру экрана которое будет работать даже в старых браузерах, я выбрал 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 в 12:33. Причина: ФОРМАТИНГ
kamikadzedead вне форума   Ответить с цитированием
Старый 23.05.2018, 12:50   #2
Javany
Форумчанин
 
Регистрация: 15.05.2018
Сообщений: 54
Репутация: 42
По умолчанию

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

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

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

Посмотрел методы по вашей ссылочке. Знаете что меня удивило? Автор статьи пишет
Цитата:
Минусом данного способ является жёсткое задание размеров.
Вопрос. А что мешает тут
Код:

   
 width: 250px;
 height: 250px

использовать "vw" и "vh" вместо "px"? Ну или проценты в крайнем случае.
__________________
Не задавай вопрос, если не знаешь что делать с ответом...
Javany вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Установка блока, имеющего свойство position: relative, по центру. Bulat Ibrahim JavaScript, Ajax 1 24.02.2017 11:36
Выравнивание блока элементов по центру prukon HTML и CSS 2 15.12.2016 22: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


14:38.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru