Merhaba arkadaşlar. CSS3 ve HTML5 öğrenmeye çalışıyorum. Bir deneme çalışmamda responsive menü yaptım. Fakat menüdeki linkler ortalı olsun istiyorum fakat hep sola yaslı duruyor. margin tagı, display tagı vb. kullandım ama bir türlü olmadı. Yardımcı olursanız sevinirim. Aşağıda örnek css ve html kodları bulunmaktadır.
*****************CSS Kodları*****************
body {
background-color: #22a1c4;
margin: 0;
}
.ust-link {
overflow: hidden;
font-weight: bold;
background: rgba(54, 25, 25, 0.5);
}
.ust-link a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 15px;
}
.ust-link a:hover {
background-color: #fff;
color: black;
}
.ust-link .icon {
display: none;
}
@media screen and (max-width: 600px) {
.ust-link a:not(:first-child) {display: none;}
.ust-link a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.ust-link.menu {position: relative;}
.ust-link.menu .icon {
position: absolute;
right: 0;
top: 0;
}
.ust-link.menu a {
float: none;
display: block;
text-align: left;
}
}
--------------------------------------------------------------------------------------------
*****************HTML Kodları*****************
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Deneme</title>
<meta name="description" content="Deneme web sayfası." />
<meta name="keywords" content="Deneme" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="linkler">
<div class="ust-link" id="ust">
<a href="#">Anasayfa</a>
<a href="#">Hakkımızda</a>
<a href="#">Galeri</a>
<a href="#">İletişim</a>
<a href="javascript:void(0);" style="font-size:15px;" class="icon">☰</a>
</div>
</div>
<script>
function fonksiyon() {
var x = document.getElementById("ust");
if (x.className === "ust-link") {
x.className += " menu";
} else {
x.className = "ust-link";
}
}
</script>
</body>
</html>