How To

Cara Membuat Vertikal Line Pada Website

Di bawah ini kita akan mempelajari cara membuat Vertikal Line dengan CSS.

Cara Membuat Vertikal Line

Contoh

<style>
.vl {
  border-left: 6px solid red;
  height: 500px;
}
</style>

<div class="vl"></div>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.vl {
  border-left: 6px solid red;
  height: 500px;
}
</style>
</head>
<body>

<h2>Vertical Line</h2>

<div class="vl"></div>

</body>
</html>

Cara memusatkan garis vertikal di halaman :
Contoh

.vl {
  border-left: 6px solid blue;
  height: 500px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.vl {
  border-left: 6px solid blue;
  height: 500px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: 0;
}
</style>
</head>
<body>

<h2>Vertical Line</h2>

<div class="vl"></div>

</body>
</html>

Hanifah Nurbaeti

Share
Tags: CSSHow To