Центриране на меню.

PHP, MySQL, JavaScript, HTML, CSS и др.
Аватар
Stoyan VK
Извън линия
Потребител
Потребител
Мнения: 23
Регистриран на: 17 Апр 2017, 19:27
Местоположение: Sofia, Bulgaria
Се отблагодари: 3 пъти
Обратна връзка:

Центриране на меню.

Мнение от Stoyan VK » 02 Апр 2021, 19:59

Здравейте имам нужда от помощ, опитвам се да центрирам едно меню, какво имам в предвид, самите бутони да са в средата, опитах чрез CSS да го направя, но поради кофти умения с CSS така и не успях. Ще бъда много благодарен, ако някой по опитен се опита да помогнe.

Не става чрез: … float:left > float: center; …
демо:
Извън темата
Изображение
HTML:
Извън темата

Код за потвърждение: Избери целия код

 <ul class="ml-navigation-bar-4">
	<li class="active"><a href="#">Начало<br/><em>Начална страница</em></a></li>
	<li><a href="#">За нас<br/><em>Кои сме ние?</em></a>

	</li>
	<li><a href="#">Услуги<br/><em>Предложения</em></a>
	</li>
	<li><a href="#">Цени<br/><em>Ценообразуване</em></a></li>
	<li><a href="#">Контакт<br/><em>Напишете ни съобщение</em></a></li>
</ul>
CSS:
Извън темата

Код за потвърждение: Избери целия код

ul.ml-navigation-bar-4{
	width: 100%;
	display: block;
	height: 70px;
	background-color: #61666d;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.25);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.25);
	box-shadow: 0 1px 2px rgba(0,0,0,.25);
	background-image: -webkit-linear-gradient(bottom, #54585f, #70747b);
	background-image: -moz-linear-gradient(bottom, #54585f, #70747b);
	background-image: -o-linear-gradient(bottom, #54585f, #70747b);
	background-image: -ms-linear-gradient(bottom, #54585f, #70747b);
	background-image: linear-gradient(to top, #54585f, #70747b);
}


/*List Items*/
ul.ml-navigation-bar-4 li{
	display:block;
    float:left;
	border-right: 1px solid #555;
	-webkit-box-shadow: 1px 0px 0px rgba(255,255,255,.15);
	-moz-box-shadow: 1px 0px 0px rgba(255,255,255,.15);
	box-shadow: 1px 0px 0px rgba(255,255,255,.15);
}

ul.ml-navigation-bar-4 ul li {
	float:none;
	margin: 5px 0; 
	
}

/* Regular Links*/
ul.ml-navigation-bar-4 a:active, ul.ml-navigation-bar-4 a:focus {
	outline-style:none;
}

ul.ml-navigation-bar-4 a {
	height: 70px;
	display:block;
	line-height: 59px;
	background: none;
	text-shadow: 0 1px 0 rgba(0,0,0,.50);
	padding: 0px 16px;
	text-decoration: none;
	color: #fff;	
	margin: 0px;
	font-weight: bold;
	font-size: 30px;
	text-transform: uppercase;
	font-weight: condensed;
	font-family: 'Open Sans Condensed', "HelveticaNeue-CondensedBold", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

ul.ml-navigation-bar-4 a em {
	font-size: 15px;
	display: block;
	margin-top: -38px;
	text-shadow: none;
	color: #ааа;
	opacity: 0.50;
	text-transform: lowercase;
	font-style: italic;
	font-weight: bold;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*Multi-level Links*/

ul.ml-navigation-bar-4 ul a {
	margin: 0px;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
}
ul.ml-navigation-bar-4 span{
	overflow:hidden;
}

ul.ml-navigation-bar-4 ul a {
	text-align:left;
	white-space:nowrap;
}

ul.ml-navigation-bar-4 li:hover{
	position:relative;
}

/*Active State*/
ul.ml-navigation-bar-4 li.active a, ul.ml-navigation-bar-4 li.active:hover a {
	background-color: #e4ac35;
	background-image: -webkit-linear-gradient(bottom, #de9f2b, #e7b544);
	background-image: -moz-linear-gradient(bottom, #de9f2b, #e7b544);
	background-image: -o-linear-gradient(bottom, #de9f2b, #e7b544);
	background-image: -ms-linear-gradient(bottom, #de9f2b, #e7b544);
	background-image: linear-gradient(to top, #de9f2b, #e7b544);
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	
}

/*Hover State*/
ul.ml-navigation-bar-4 li:hover>a {
	color: #fff;
	background-color: #52565c;
	-webkit-box-shadow: 0 1px rgba(255,255,255,.10), inset 0 1px 1px rgba(0,0,0,.50);
	-moz-box-shadow: 0 1px rgba(255,255,255,.10), inset 0 1px 1px rgba(0,0,0,.50);
	box-shadow: 0 1px rgba(255,255,255,.10), inset 0 1px 1px rgba(0,0,0,.50);
	text-decoration:none;
}

ul.ml-navigation-bar-4 ul li:hover>a {
	color: #fff;
	background-color: #52565c;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

ul.ml-navigation-bar-4 li a:hover{
	position:relative;
}

/*Arrow Images*/
ul.ml-navigation-bar-4 span{
	display:block;
	background-image:url(https://medialoot.com/preview/navigation-bars/arrow-1a.png);
	background-position:right center;
	background-repeat: no-repeat;
   padding-right:30px;}
   
ul.ml-navigation-bar-4 li:hover>a>span{
	background-image:url(https://medialoot.com/preview/navigation-bars/arrow-1a.png);
}

ul.ml-navigation-bar-4 a:hover span{ background-image:url(https://medialoot.com/preview/navigation-bars/arrow-1a.png)}
ul.ml-navigation-bar-4 ul span,ul.ml-navigation-bar-4 a:hover table span{ background-image:url(https://medialoot.com/preview/navigation-bars/arrow-2.png)}
ul.ml-navigation-bar-4 ul li:hover > a span{ background-image:url(./https://medialoot.com/preview/navigation-bars/arrow-2a.png);}
ul.ml-navigation-bar-4 table a:hover span,ul.ml-navigation-bar-4 table a:hover a:hover span,ul.ml-navigation-bar-4 table a:hover a:hover a:hover span{background-image:url(./arrow-1.png)}
ul.ml-navigation-bar-4 table a:hover table span,ul.ml-navigation-bar-4 table a:hover a:hover table span{background-image:url(./arrow-1.png)}
"Бъди промяната, която искаш да видиш в света." ~ Махатма Ганди

Аватар
HybridMind
Извън линия
Администратор
Администратор
Мнения: 62
Регистриран на: 11 Окт 2016, 14:41
Местоположение: var/www
Се отблагодари: 13 пъти
Получена благодарност: 46 пъти
Обратна връзка:

Центриране на меню.

Мнение от HybridMind » 02 Апр 2021, 20:05

Вземи кода оттук: https://codepen.io/HybridMind1337/pen/vYgxooE

Заключено
  • Подобни теми
    Отговори
    Преглеждания
     Последно мнение

Обратно към “Уеб Програмиране”

Кой е на линия

Потребители разглеждащи този форум: 0 регистрирани и 8 госта