ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как выровнять li по центру внутри ul
7 сообщений из 7, страница 1 из 1
Как выровнять li по центру внутри ul
    #39311022
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Есть список неких элементов, расположенных в одну строку.
Упрощенный html приведен ниже.
Код: 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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<style type='text/css'>
* {
	margin: 0;
	padding: 0;
}
ul
{
	display: table;
	list-style: none;
	width: 400px;
	border: 1px solid black;
}
li
{
	float: left;
	width: 100px;
	height: 100px;
	margin-right: 20px;
	border: 1px solid green;
}
li#last
{
	margin-right: 0;
}

</style>
</head>
<body>
<div>
	<ul>
		<li>li-1</li>
		<li>li-2</li>
		<li id="last">li-3</li>
	</ul>
</div>
</body>
</html>


Фиксированные размеры приведены для наглядности.
Как правило, они в процентах.
Если запустить этот html, то можно увидеть, что элементы (li) прижимаются к левой границе родителя (ul), а справа образуется промежуток. Можно ли как-то средствами css выровнять элементы по центру внутри ul?

Задание фиксированной ширины для ul не годится, т.к. при динамическом формировании страницы она (ширина) может быть разная.
Заранее спасибо!
...
Рейтинг: 0 / 0
18.09.2016, 17:28
| Ответить | Цитировать | Написать  
Как выровнять li по центру внутри ul
    #39311135
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayМожно ли как-то средствами css выровнять элементы по центру внутри ul?
Как вариант...
Код: 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.
<!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'>
* {
	margin: 0;
	padding: 0;
}
ul {
	display: flex;
	justify-content: center;
	list-style: none;
	width: 400px;
	border: 1px solid black;
}
li {
	width: 100px;
	height: 100px;
	margin-right: 20px;
	border: 1px solid green;
}
li#last {
	margin-right: 0;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div>
	<ul>
		<li>li-1</li>
		<li>li-2</li>
		<li id="last">li-3</li>
	</ul>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
19.09.2016, 08:55
| Ответить | Цитировать | Написать  
Как выровнять li по центру внутри ul
    #39311136
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhay
Код: css
1.
2.
3.
4.
5.
6.
ul {
	display: table;
}
li {
	float: left;
}


Это весьма странное сочетание...
...
Рейтинг: 0 / 0
19.09.2016, 08:56
| Ответить | Цитировать | Написать  
Как выровнять li по центру внутри ul
    #39313619
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Спасибо!

авторЭто весьма странное сочетание
Скопировал кусок верстки пятилетней давности ))
А какой display нужно указать для родителя, внутри которого лежат дивы с float: left?
Помню, если display: table не указать, то родитель получается с нулевой высотой.
Из-за этого начинают ехать все элементы ниже.

А теперь усложняем задачу.
Пусть элементы списка располагаются не строго в одну строчку, а в N строчек.
N - динамичеcкое. Когда элементы начинают вылазить за родителя, они перепрыгивают на новую строку.
В общем, стандартное поведение. Рассмотрим для простоты сетку 3*3.
Вот мне нужно также выровнять эту сетку по ширине ul.

Приведенный выше метод работает для одной строчки.
Но он не позволяет элементам переноситься на новую строку.
...
Рейтинг: 0 / 0
22.09.2016, 16:44
| Ответить | Цитировать | Написать  
Как выровнять li по центру внутри ul
    #39313898
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayА какой display нужно указать для родителя, внутри которого лежат дивы с float: left?
Аля block .

urukhayПомню, если display: table не указать, то родитель получается с нулевой высотой.
Из-за этого начинают ехать все элементы ниже.
Для устранения такого эффекта нужно использовать
Код: css
1.
overflow: hidden;



urukhayА теперь усложняем задачу.
Начинай уже делать тестовые примеры...
...
Рейтинг: 0 / 0
23.09.2016, 09:26
| Ответить | Цитировать | Написать  
Как выровнять li по центру внутри ul
    #39313902
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
urukhayПриведенный выше метод работает для одной строчки.
Но он не позволяет элементам переноситься на новую строку.
Имеет смысл таки почитать тебе про flex бокс...
http://html5.by/blog/flexbox/

Расширим его возможности...

Код: 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.
<!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'>
* {
	margin: 0;
	padding: 0;
}
ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	width: 400px;
	border: 1px solid black;
}
li {
	width: 100px;
	height: 100px;
	margin-right: 20px;
	border: 1px solid green;
}
li#last {
	margin-right: 0;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div>
	<ul>
		<li>li-1</li>
		<li>li-1</li>
		<li>li-1</li>
		<li>li-1</li>
		<li>li-1</li>
		<li>li-1</li>
		<li>li-1</li>
		<li>li-1</li>
		<li>li-1</li>
		<li>li-2</li>
		<li id="last">li-3</li>
	</ul>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
23.09.2016, 09:30
| Ответить | Цитировать | Написать  
Как выровнять li по центру внутри ul
    #39315090
urukhay
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
urukhay
Участник
Если бы я знал, о чем читать, я бы не обращался сюда ))
Спасибо,буду изучать!
...
Рейтинг: 0 / 0
25.09.2016, 13:47
| Ответить | Цитировать | Написать  
7 сообщений из 7, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как выровнять li по центру внутри ul
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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