ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS. Поставить текст по середине окна
19 сообщений из 19, страница 1 из 1
CSS. Поставить текст по середине окна
    #39455738
AnnitaBells
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AnnitaBells
Участник
База выдаёт текст. Нужно показать его по центру экрана.
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:06
| Ответить | Цитировать | Написать  
CSS. Поставить текст по середине окна
    #39455743
Фотография Relic Hunter
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Relic Hunter
Участник
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:27
| Ответить | Цитировать | Написать  
CSS. Поставить текст по середине окна
    #39455745
AnnitaBells
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
AnnitaBells
Участник
Relic Hunter,

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

Если есть бурстреп, то https://www.w3schools.com/bootstrap/bootstrap_modal.asp
...
Рейтинг: 0 / 0
19.05.2017, 01:08
| Ответить | Цитировать | Написать  
CSS. Поставить текст по середине окна
    #39455785
DymSig
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
DymSig
Гость
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:02
| Ответить | Цитировать | Написать  
CSS. Поставить текст по середине окна
    #39455793
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
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, 08:24
| Ответить | Цитировать | Написать  
CSS. Поставить текст по середине окна
    #39456026
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
Через табличную верстку
Код: 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:29
| Ответить | Цитировать | Написать  
CSS. Поставить текст по середине окна
    #39456045
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
krvsa,

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

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

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


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

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

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

проблемы в том, что разных данных на странице много. При вашем способе эти данные съезжают в центр.
...
Рейтинг: 0 / 0
19.05.2017, 15:59
| Ответить | Цитировать | Написать  
CSS. Поставить текст по середине окна
    #39456305
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
AnnitaBellsпроблемы в том, что разных данных на странице много. При вашем способе эти данные съезжают в центр.
дак озвуч все , а не кусками
...
Рейтинг: 0 / 0
19.05.2017, 16:30
| Ответить | Цитировать | Написать  
CSS. Поставить текст по середине окна
    #39456331
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
AnnitaBellsпроблемы в том, что разных данных на странице много. При вашем способе эти данные съезжают в центр.
https://jsfiddle.net/5u40zeme/2/
...
Рейтинг: 0 / 0
19.05.2017, 16:57
| Ответить | Цитировать | Написать  
CSS. Поставить текст по середине окна
    #39457054
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
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:45
| Ответить | Цитировать | Написать  
CSS. Поставить текст по середине окна
    #39457055
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
вадядак озвуч все , а не кусками
Что-то мне подсказывает, что пока мы ей ее страницу не сделаем - все наши примеры будут "не такими".
...
Рейтинг: 0 / 0
22.05.2017, 08:46
| Ответить | Цитировать | Написать  
CSS. Поставить текст по середине окна
    #39457196
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
krvsaвадядак озвуч все , а не кусками
Что-то мне подсказывает, что пока мы ей ее страницу не сделаем - все наши примеры будут "не такими".
ага
...
Рейтинг: 0 / 0
22.05.2017, 11:45
| Ответить | Цитировать | Написать  
19 сообщений из 19, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / CSS. Поставить текст по середине окна
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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