TheLastRevolution
Üye
Buradaki Yazıyı Nasıl Ortalarım ?
Arkadaşlar merhaba aşşağıdaki menü de yazıları tam olarak ikonların ortasına gelmesini istiyorum CSS ve HTML kodlarını aşşağıda verdim şimdiden teşekkürler
HTML
CSS
HTML
HTML:
<html>
<head>
<title>5G Bilişim</title>
<link href="slider.css" rel="stylesheet" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Roboto:900' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<ul>
<li><a class="anasayfa" href="#anasayfa"> <i class="material-icons">home</i> Ana Sayfa </a></div></li>
<li><a class="ceptel" href="#ceptel"> <i class="material-icons">stay_current_portrait</i> Cep Telefonları </a></li>
<li><a class="pc" href="#bilgisayar"> <i class="material-icons">desktop_windows</i> Bilgisayarlar </a></li>
<li><a class="about" href="#hakkimizda"> <i class="material-icons">info_outline</i> Hakkımızda </a></li>
<li><a class="contact" href="#contact"> <i class="material-icons">phone</i> İletişim </a></li>
</ul>
<iframe name="icerik" width="20%" height="100%"></iframe>
</body>
</html>
CSS
HTML:
body {
margin-top: 5%;
height: 100%;
width: 15%;
border-right:1px;
border-color:#212121;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 20%;
background-color: #fff;
position: fixed;
height: 100%;
font-weight:bold;
font-family: 'Roboto';
border-right:1px;
border-color:#212121;
}
li a {
display: block;
color: #000;
padding: 8px 0 8px 16px;
text-decoration: none;
}
li a.anasayfa {
color: #666666;
text-align:center;
margin-top: 2%;
}
li a.anasayfa:hover {
color:#fff;
background-color: #303f9f;
}
li a.ceptel {
color:#666666;
text-align:center;
margin-top: 2%;
}
li a.ceptel:hover {
color:#fff;
background-color: #FFA000;
}
li a.pc {
color:#666666;
text-align:center;
margin-top: 2%;
}
li a.pc:hover {
color:#fff;
background-color: #03a9f4;
}
li a.about {
color:#666666;
text-align:center;
margin-top: 2%;
}
li a.about:hover {
color:#fff;
background-color:#388e3c;
}
li a.contact {
color:#666666;
text-align:center;
margin-top: 2%;
margin-bottom: 2%;
}
li a.contact:hover {
color:#fff;
background-color:#d32f2f;
}