HTML Sayfayı ekranda ortalamak

ErsinErce · 15 Ekim 2016, 16:28:50

<html>
<head>
<style>
h1, h3{margin:0;}
h1{color:blue;}
table, td {
    border: 1px solid black;
    border-collapse: collapse;
}
#f {
    width: 400px;
}
#f tr{
   vertical-align: middle;
}
#f td {
    height: 50px;
    text-align: center;
}
#s {
    width: 50%; 
    margin-left:25%; 
    margin-right:25%;
}
#s td {
    height: 20px;
    text-align: center;
}
</style>
</head>
<body>
<div align="center">
<table id="f">
<tr><td><h1>STM32F103C8</h1></td></tr>
<tr><td><table id="s">
<tr><td>GPIO A</td><td>0x%04x</td></tr>
<tr><td>GPIO B</td><td>0x%04x</td></tr> 
<tr><td>GPIO C</td><td>0x%04x</td></tr> 
</table></td></tr>
<tr><td><h3>Sonu</h3></td><tr></table>
</div></body></html>

buyrun hocam

z · 15 Ekim 2016, 16:59:57

Çok sağolasın. Yavaş yavaş anlamaya başladığım yapıdan bayağı farklıymış.

muhittin_kaplan · 15 Ekim 2016, 17:00:47

açtığın herşeyi kapat hocam. temel teknik.

barisertekin · 15 Ekim 2016, 17:10:59

<tr> tagindeki height:20px tanımını silerseniz otomatikman ortalanır.
Zaten default olarak hiç bir şey yapmadığınız zaman ortada gelir.
Yükseklik tanımlarını satıra değil sutuna vermek gerekiyor.
Sutunlardan birine vermeniz yeterlidir.

Kodunuzu aşağıdaki linkten önizleyebilirsiniz. Aynı yerden bakmış oluruz.
http://codebeautify.org/htmlviewer/cbd54fad

FullScreen butonuna basarsanız kod daha iyi gözükür. Çok düzgün bir tool yapamamışlar.

z · 15 Ekim 2016, 17:20:47

Çok ilginç buradaki kodlar bir makinadadüşeyde tam istediğim gibi ortalı çıkıyor. Bir başka makinede düşeyde ortalanmadan çıkıyor.

https://www.picproje.org/index.php/topic,65914.msg513403.html#msg513403

Ersinercenin verdiği kodlar her iki makinada da sorunsuz.

barisertekin · 15 Ekim 2016, 17:42:38

Makine değil de her tarayıcı farklı yorumlar.
Özellikle bu konuda yıllardır IE'ye okumadığımız bela kalmamıştır.
Ben Chrome'da bakıyorum. IE'nin de kendi içinde her versiyonunda farklı yorumlanabilir.
Her tarayıcı için stabil kod yazmanın yöntemleri var fakat biraz daha tecrübe gerektiriyor

Kullanmak istediğiniz propery'nin hangi tarayıcılar tarafından desteklendiğini aşağıdaki linkten kontrol edebilirsiniz.
Örnek olarak "vertical-align" property'sine bakalım.
http://caniuse.com/#search=vertical-align

z · 15 Ekim 2016, 17:47:34

<h1<,<h2< yerine <p< dersem sorun kalmıyor. P için font yüksekliği vermeyi deneyeceğim.

Picproje Elektronik Sitesi

Haberler:

HTML Sayfayı ekranda ortalamak

ErsinErce

z

muhittin_kaplan

barisertekin

z

barisertekin

z