Cara Membuat Vertikal Line Pada Website

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti March 9, 2021

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>