Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS. Поставить текст по середине окна / 19 сообщений из 19, страница 1 из 1
19.05.2017, 00:06
    #39455738
AnnitaBells
AnnitaBells
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
База выдаёт текст. Нужно показать его по центру экрана.
popup.div
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
{
	text-align: center;
	position: absolute;
	margin: auto;
        right: 0;
        left: 0;
	top: 0;
	bottom: 0;
	z-index: 10;
}


не работает. Знаю, что надо задать высоту и ширину, но я же не могу их предсказать. Возможно это сделать с помощью css или js? Библиотека - AngularJS.
text-align: center; - тоже не работает. Текст показывается слева.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 00:27
    #39455743
Relic Hunter
Relic Hunter
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
AnnitaBells,

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
<!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>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 00:51
    #39455745
AnnitaBells
AnnitaBells
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
Relic Hunter,

Надо разместить этот див по центру экрана, а не сам текст внутри дива по центру.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 01:08
    #39455749
Relic Hunter
Relic Hunter
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
AnnitaBells,

Если есть бурстреп, то https://www.w3schools.com/bootstrap/bootstrap_modal.asp
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 08:02
    #39455785
DymSig
DymSig
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
AnnitaBells,

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<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>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 08:24
    #39455793
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
AnnitaBellsБаза выдаёт текст. Нужно показать его по центру экрана.
Новомодний вариант...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
<!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>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 12:29
    #39456026
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
Через табличную верстку
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
<!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>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 12:44
    #39456045
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
krvsa,

+100
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 13:18
    #39456089
AnnitaBells
AnnitaBells
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
krvsa,

так на странице ещё много-много разных элементов. Зачем их смещать в центр?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 13:36
    #39456111
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
AnnitaBellsтак на странице ещё много-много разных элементов. Зачем их смещать в центр?
Ты про это не писал...

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
<!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>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 14:32
    #39456167
AnnitaBells
AnnitaBells
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
krvsa,

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


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

krvsa Ты про это не писал...
Не писала.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 14:57
    #39456202
AnnitaBells
AnnitaBells
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
DymSig,

размеры дива должны подгоняться под длину текста, взятого из базы. Никаких 100%.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 15:11
    #39456224
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
AnnitaBells,
какие проблемы?
https://jsfiddle.net/5u40zeme/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 15:59
    #39456273
AnnitaBells
AnnitaBells
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
вадяAnnitaBells,
какие проблемы?
https://jsfiddle.net/5u40zeme/

проблемы в том, что разных данных на странице много. При вашем способе эти данные съезжают в центр.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 16:30
    #39456305
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
AnnitaBellsпроблемы в том, что разных данных на странице много. При вашем способе эти данные съезжают в центр.
дак озвуч все , а не кусками
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
19.05.2017, 16:57
    #39456331
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
AnnitaBellsпроблемы в том, что разных данных на странице много. При вашем способе эти данные съезжают в центр.
https://jsfiddle.net/5u40zeme/2/
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.05.2017, 08:45
    #39457054
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
AnnitaBellsмне нужен див, который ДИНАМИЧЕСКИ меняет длину и высоту. Подлаживается под то, что выдаёт база. И при этом стоит в центре.
Ты даже не понимаешь, что решение уже у тебя есть.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
<!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>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.05.2017, 08:46
    #39457055
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
вадядак озвуч все , а не кусками
Что-то мне подсказывает, что пока мы ей ее страницу не сделаем - все наши примеры будут "не такими".
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
22.05.2017, 11:45
    #39457196
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
CSS. Поставить текст по середине окна
krvsaвадядак озвуч все , а не кусками
Что-то мне подсказывает, что пока мы ей ее страницу не сделаем - все наши примеры будут "не такими".
ага
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS. Поставить текст по середине окна / 19 сообщений из 19, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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