Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как выровнять li по центру внутри ul / 7 сообщений из 7, страница 1 из 1
18.09.2016, 17:28
    #39311022
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять li по центру внутри ul
Есть список неких элементов, расположенных в одну строку.
Упрощенный 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
| Ответить | Цитировать | Написать  
19.09.2016, 08:55
    #39311135
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять li по центру внутри ul
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:56
    #39311136
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять li по центру внутри ul
urukhay
Код: css
1.
2.
3.
4.
5.
6.
ul {
	display: table;
}
li {
	float: left;
}


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

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

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

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

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



urukhayА теперь усложняем задачу.
Начинай уже делать тестовые примеры...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
23.09.2016, 09:30
    #39313902
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять li по центру внутри ul
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
| Ответить | Цитировать | Написать  
25.09.2016, 13:47
    #39315090
urukhay
urukhay
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Как выровнять li по центру внутри ul
Если бы я знал, о чем читать, я бы не обращался сюда ))
Спасибо,буду изучать!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Как выровнять li по центру внутри ul / 7 сообщений из 7, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


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