Buradaki Yazıyı Nasıl Ortalarım ?

TheLastRevolution

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

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;
}

DarkredBlue61

Center Filan Yazsan Olmuyormu Yazının Sonuna Başına Filan ?

Medyaları görüntülemek için kayıt olmalısınız

Gibi
"

"

Medyaları görüntülemek için kayıt olmalısınız

"/center]" Böyle Pardon

Oto Düzeltiyorda XXX

XXXX

XXX

TheLastRevolution

Hocam gece gece neler yaptınız konuya

Hayır hocam orası CSS olduğu için olmuyor ne yazık ki center

0MG90

Ozan abiye soruver

BLasTeaR

Arkadaşın dediği gibi, oradaki tüm kodu bu kodun arasına yapıştır da dene bakalım

Kod:

[CENTER]maxicep[/CENTER]

TheLastRevolution

BLasTeaR' Alıntı:
Arkadaşın dediği gibi, oradaki tüm kodu bu kodun arasına yapıştır da dene bakalım

Kod:

[CENTER]maxicep[/CENTER]

dediğim gibi CSS olduğu için olmuyor center etiketi

@Ozan abi bir fikrin var mı acaba ?

Ozan

.li a {

css tanımlamalarına;

Kod:

display: -webkit-box;

eklersen muhtemelen düzelecek.

TheLastRevolution

Ozan' Alıntı:
.li a {

css tanımlamalarına;

Kod:

display: -webkit-box;

eklersen muhtemelen düzelecek.

teşekkürler hocam hemen deniyorum
hocam yazı ve iconlar komple sola kaydı ancak yazılar yinede iconların altında

edit : icon dediklerim google web fontu ile yaptığım ikonlar kodalra bakarsanız hocam anlarsınız bir nevi yazı yani onlarda

Ozan

Ben aynı hizaya gelsin istediniz sandım.
Altında ortalı gelmesi için;

.material-icons {

css tanımlaması yapacaksınız slider.css de ve şunu ekleyeceksiniz.

Kod:

display:block !important;

olarak düzenlediğinde, alt alta ortalı olacaktır.

Yani slider.css son hali şu sekilde :

PHP:

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;
}

.material-icons {
    display:block !important;
    }

TheLastRevolution

hocam cevap için teşekkürler ancak o ikonları ben google ın sitesinden çekiyorum yani yerel tanımlama değil bu şekilde yine de çalışır mı ?
hocam bunu da denedim ancak bu sefer de ikonların en tepesine çıktı yazılar ve ikonlara yapıştılar

hocam amacım

Linkleri görüntülemek için kayıt olmalısınız

yan menü gibi bir menü yapmak

Buradaki Yazıyı Nasıl Ortalarım ?

Benzer Konular

Privacy & Transparency

Privacy & Transparency