подскажите с центровкой элемента HTML - HTML и CSS

m1521 · 08.02.2017, 10:12

В приложении картинка, на ней бирюзовое меню, прилеплено к левому краю. Что мне в коде надо изменить что бы оно было по центру.

Меню масштабируемое при изменении размера окна.
т.е. если окно растянут длинну, меню будет в крайнем левом положении, на картинке это видно немного

Скажу честно с html имею дело впервые, просьба сильно не пинать.

вот фрагмент кода

Код:

.megamenu{margin-bottom:0px;padding:0;width:100%;list-style:none;display:inline-block;position:relative;font-size:15px}
.megamenu li{margin-bottom:-5px;display:inline}
.megamenu>li>a{float:left;padding:8px 63.1px;text-decoration:none;text-transform:capitalize;font-size:1em; -webkit-transition: all 0.3s ease-in-out;text-transform:uppercase;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	background: #27ACB3;
	text-decoration:none;
	color:#fff;
	font-size: 16px;
	font-weight: 300;

Вадим Мошев · 08.02.2017, 12:24

Попробуйте для .megamenu
1. Задать фиксированную ширину в сколько-то пикселей (соответственно удалить width:100%

2. Вместо margin-bottom:0px; написать margin: 0 auto 0;
3. Вместо display:inline-block написать display: block
_________

Вам, думаю, должно такого хватить.

08.02.2017, 10:12	#1
m1521 Новичок Джуниор Регистрация: 08.02.2017 Сообщений: 1	подскажите с центровкой элемента HTML В приложении картинка, на ней бирюзовое меню, прилеплено к левому краю. Что мне в коде надо изменить что бы оно было по центру. Меню масштабируемое при изменении размера окна. т.е. если окно растянут длинну, меню будет в крайнем левом положении, на картинке это видно немного Скажу честно с html имею дело впервые, просьба сильно не пинать. вот фрагмент кода Код: .megamenu{margin-bottom:0px;padding:0;width:100%;list-style:none;display:inline-block;position:relative;font-size:15px} .megamenu li{margin-bottom:-5px;display:inline} .megamenu>li>a{float:left;padding:8px 63.1px;text-decoration:none;text-transform:capitalize;font-size:1em; -webkit-transition: all 0.3s ease-in-out;text-transform:uppercase; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background: #27ACB3; text-decoration:none; color:#fff; font-size: 16px; font-weight: 300; Последний раз редактировалось Alex11223; 08.02.2017 в 11:51.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Двусвязный список, вставка элемента в заданную позицию, и удаление элемента из заданной позиции - C++	Stok7	Помощь студентам	2	10.12.2016 19:52
[XML] Нахождение аттрибута элемента по значению дочернего элемента.	Banavia	C# (си шарп)	10	29.07.2013 00:48
Затемнение с центровкой картинки	WennY	JavaScript, Ajax	6	04.10.2012 17:50
можно ли прописать стиль для элемента "внутри" этого самого элемента ?	vedro-compota	HTML и CSS	8	03.05.2010 17:24
Си -Расположить элементы в порядке возрастания от первого нулевого элемента до отрицательного элемента	Freia	Помощь студентам	17	13.12.2009 15:41

08.02.2017, 12:24	#2
Вадим Мошев Старожил Регистрация: 12.11.2010 Сообщений: 8,568	Попробуйте для .megamenu 1. Задать фиксированную ширину в сколько-то пикселей (соответственно удалить width:100% 2. Вместо margin-bottom:0px; написать margin: 0 auto 0; 3. Вместо display:inline-block написать display: block _________ Вам, думаю, должно такого хватить.