Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 CSS. Поставить текст по середине окна  [new]
AnnitaBells
Member

Откуда:
Сообщений: 20
База выдаёт текст. Нужно показать его по центру экрана.
popup.div
{
	text-align: center;
	position: absolute;
	margin: auto;
        right: 0;
        left: 0;
	top: 0;
	bottom: 0;
	z-index: 10;
}

не работает. Знаю, что надо задать высоту и ширину, но я же не могу их предсказать. Возможно это сделать с помощью css или js? Библиотека - AngularJS.
text-align: center; - тоже не работает. Текст показывается слева.
19 май 17, 00:06    [20494506]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
Relic Hunter
Member

Откуда: AB
Сообщений: 6213
AnnitaBells,

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        div { border:1px solid green;}
    </style>
</head>
<body>
    <div style="display: table; height: 400px; overflow: hidden;">
        <div style="display: table-cell; vertical-align: middle;">
            <div>
                everything is vertically centered in modern IE8+ and others.
            </div>
        </div>
    </div>
</body>


</html>
19 май 17, 00:27    [20494537]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
AnnitaBells
Member

Откуда:
Сообщений: 20
Relic Hunter,

Надо разместить этот див по центру экрана, а не сам текст внутри дива по центру.
19 май 17, 00:51    [20494549]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
Relic Hunter
Member

Откуда: AB
Сообщений: 6213
AnnitaBells,

Если есть бурстреп, то https://www.w3schools.com/bootstrap/bootstrap_modal.asp
19 май 17, 01:08    [20494560]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
DymSig
Member

Откуда:
Сообщений: 7
AnnitaBells,

<head>
    <style>
	body { margin:0px; }
        .box { display: table;
		  box-sizing: border-box;
		  text-align: center;
		  position:absolute; 
		  height: 100%; 
		  width:100%;
		}
	.text { display: table-cell; 
		  vertical-align: middle;
		}	
    </style>
</head>
<body>
    <div class="box">
	<span class="text">
	      The text is centered on the screen in IE11.
        </span>
    </div>
</body>
19 май 17, 08:02    [20494674]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 12870
AnnitaBells
База выдаёт текст. Нужно показать его по центру экрана.

Новомодний вариант...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<style type='text/css'>
html,
body {
	width: 100%;
	height: 100%;
}
body {
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<p>База выдаёт текст. Нужно показать его по центру экрана.</p>
</body>
</html>
19 май 17, 08:24    [20494702]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
user89
Member

Откуда:
Сообщений: 2028
Через табличную верстку
<!DOCTYPE html>
<html>
<head>
<title>Выравнивание резинового DIV по центру экрана</title>
<style>
.tableCenter {
  position:absolute;
  top:0; left:0;
  height:100%;
  width:100%;
  z-index:-1; /* Нужно, чтобы выделять мышью текст за пределами нашего центрального дива */
}
.divCenter {
  background:orange;
  display:table;
  margin:auto;
}
</style>
</head>
<body>
<table class="tableCenter"> <tr> <td>
  <div class="divCenter">Этот DIV<br>резиновый.<br><br><br>Он выровнен по центру экрана.<br><br>Как по горизонтали, так и по вертикали<br><br><br><br>
  </div>
</table>
</body>
</html>
19 май 17, 12:29    [20495861]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 12706
krvsa,

+100
19 май 17, 12:44    [20495977]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
AnnitaBells
Member

Откуда:
Сообщений: 20
krvsa,

так на странице ещё много-много разных элементов. Зачем их смещать в центр?
19 май 17, 13:18    [20496234]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 12870
AnnitaBells
так на странице ещё много-много разных элементов. Зачем их смещать в центр?

Ты про это не писал...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<style type='text/css'>
html,
body {
	width: 100%;
	height: 100%;
}
#message {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: red;
	font-size: 200%;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<p>
	Служба Яндекс.Рефераты предназначена для студентов и школьников, 
	дизайнеров и журналистов, создателей научных заявок и отчетов — 
	для всех, кто относится к тексту, как к количеству знаков.
</p>
<p>
	Нажав на кнопку «Написать реферат», вы лично создаете уникальный 
	текст, причем именно от вашего нажатия на кнопку зависит, какой 
	именно текст получится — таким образом, авторские права на реферат 
	принадлежат только вам.
</p>
<p>
	Теперь никто не сможет обвинить вас в плагиате, ибо каждый текст 
	Яндекс.Рефератов неповторим.
</p>
<p>
	Текстами рефератов можно пользоваться совершенно бесплатно, однако 
	при транслировании и предоставлении текстов в массовое пользование 
	ссылка на Яндекс.Рефераты обязательна.
</p>
<div id='message'>
	<p>База выдаёт текст. Нужно показать его по центру экрана.</p>
</div>
</body>
</html>
19 май 17, 13:36    [20496340]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
AnnitaBells
Member

Откуда:
Сообщений: 20
krvsa,

нет, этот див занимает ВЕСЬ экран, сделайте так и поймёте, о чём я:
	color: red;
	background-color: green;

мне нужен див, который ДИНАМИЧЕСКИ меняет длину и высоту. Подлаживается под то, что выдаёт база. И при этом стоит в центре.

krvsa
Ты про это не писал...

Не писала.
19 май 17, 14:32    [20496588]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
AnnitaBells
Member

Откуда:
Сообщений: 20
DymSig,

размеры дива должны подгоняться под длину текста, взятого из базы. Никаких 100%.
19 май 17, 14:57    [20496705]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 12706
AnnitaBells,
какие проблемы?
https://jsfiddle.net/5u40zeme/
19 май 17, 15:11    [20496769]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
AnnitaBells
Member

Откуда:
Сообщений: 20
вадя
AnnitaBells,
какие проблемы?
https://jsfiddle.net/5u40zeme/


проблемы в том, что разных данных на странице много. При вашем способе эти данные съезжают в центр.
19 май 17, 15:59    [20496921]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 12706
AnnitaBells
проблемы в том, что разных данных на странице много. При вашем способе эти данные съезжают в центр.

дак озвуч все , а не кусками
19 май 17, 16:30    [20497032]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 12706
AnnitaBells
проблемы в том, что разных данных на странице много. При вашем способе эти данные съезжают в центр.

https://jsfiddle.net/5u40zeme/2/
19 май 17, 16:57    [20497117]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 12870
AnnitaBells
мне нужен див, который ДИНАМИЧЕСКИ меняет длину и высоту. Подлаживается под то, что выдаёт база. И при этом стоит в центре.

Ты даже не понимаешь, что решение уже у тебя есть.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
html,
body {
	width: 100%;
	height: 100%;
}
#message {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	color: red;
	font-size: 200%;
}
#message > p {
	display: inline-block;
	background-color: yellow;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<p>
	Служба Яндекс.Рефераты предназначена для студентов и школьников, 
	дизайнеров и журналистов, создателей научных заявок и отчетов — 
	для всех, кто относится к тексту, как к количеству знаков.
</p>
<p>
	Нажав на кнопку «Написать реферат», вы лично создаете уникальный 
	текст, причем именно от вашего нажатия на кнопку зависит, какой 
	именно текст получится — таким образом, авторские права на реферат 
	принадлежат только вам.
</p>
<p>
	Теперь никто не сможет обвинить вас в плагиате, ибо каждый текст 
	Яндекс.Рефератов неповторим.
</p>
<p>
	Текстами рефератов можно пользоваться совершенно бесплатно, однако 
	при транслировании и предоставлении текстов в массовое пользование 
	ссылка на Яндекс.Рефераты обязательна.
</p>
<div id='message'>
	<p>База выдаёт текст. Нужно показать его по центру экрана.</p>
</div>
</body>
</html>
22 май 17, 08:45    [20500210]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
krvsa
Member

Откуда: г Волжский
Сообщений: 12870
вадя
дак озвуч все , а не кусками

Что-то мне подсказывает, что пока мы ей ее страницу не сделаем - все наши примеры будут "не такими".
22 май 17, 08:46    [20500213]     Ответить | Цитировать Сообщить модератору
 Re: CSS. Поставить текст по середине окна  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 12706
krvsa
вадя
дак озвуч все , а не кусками

Что-то мне подсказывает, что пока мы ей ее страницу не сделаем - все наши примеры будут "не такими".

ага
22 май 17, 11:45    [20500833]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить