Html ve Css ile Dikey Çizgi Nasıl Yapılır?

Web sayfalarımızı tasarlarken bazı durumlarda dikey çizgi oluşturma ihtiyacımız olabiliyor. Örneğin, bir timeline tasarlamak isterseniz dikey çizgiyi kullanmanız gerekecektir. Html etiketlerinden olan <hr> etiketi ile yatay çizgi oluşturabiliyoruz. Ama dikey çizgi oluşturmak için herhangi bir Html etiketi bulunmuyor. Bu yüzden Css ile dikey çizgi oluşturacağız.

Css ile dikey çizgi oluşturmanın  birden fazla yöntemi bulunuyor. Bu yazımızda en basit ve kullanışlı yöntemden bahsedeceğim.

 ⇒  Öncelikle bir <div> etiketi oluşturup, id attribute’una verticle yazıyorum.

 ⇒  Css kodlarımızı yazalım.

Gördüğünüz gibi Css ile 3 satır kod yazarak oluşturabiliyoruz.

Şimdi de oluşturacağımız bir dikey çizgiyi yatayda tam ortaya nasıl konumlandırabiliriz ona bakalım.

 ⇒  Yine bir <div> etiketi oluşturup, id attribute’una verticle yazıyorum.

 ⇒  Css kodlarımızı yazalım.

İstediğimiz bir yükseklik değeri verdikten sonra, yatayda ortalamak için position özelliğine absolute değerini, left özelliğine ise 50% değerini veriyoruz.

Son olarak sayfanın tam ortasında olması için vermiş olduğumuz border-left değerinin yarısının eksi (-) değerini, margin-left olarak veriyoruz. 

Örneği incelerseniz dikey çizginin yatayda tam ortalandığını görebilirsiniz.

Umarım sizin faydalı bir yazı olmuştur. Şu yazılarda ilginizi çekebilir.

Html ve Css ile Üçgen Yapımı 

Css ile Tooltip Yapımı 

Css ile Html Ortalama (Yazı, Resim, Form, Tablo, Sayfa, Menü vb..)

Css ile Dikey Menü Yapımı

Yeni bir yazımda görüşmek üzere. 

Yorum Yazın

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link