Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Menentukan Nilai Rataan Teks HTML alignContent Style DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Properti DOM Style alignContent merupakan properti yang digunakan untuk menentukan nilai rataan teks atau item dari sebuah container fleksibel dimana item tersebut tidak digunakan pada semua ruang yang tersedia pada cross-axis.


Sebelum memahami lebih dalam materi tentang Menentukan Nilai Rataan Teks HTML alignContent Style DOM, terlebih dahulu pelajari materi tentang: Memeriksa Nilai Lebar HTML Menggunakan Width Screen, Memeriksa Resolusi Warna HTML Menggunakan pixelDepth Screen, dan Memeriksa Panjang HTML Menggunakan Height Screen.

Sintak:
  • untuk mendapatkan properti alignContent: object.style.alignContent
  • untuk mengatur properti alignContent: object.style.alignContent = "stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit"

Property Values:
  • stretch: digunakan untuk melakukan stretch atau peregangan item supaya sesuai dengan container.
  • center: digunakan untuk menempatkan item ditengah pada posisi container.
  • flex-start: digunakan untuk memposisikan item pada bagian awal dari container.
  • flex-end: digunakan untuk memposisikan item di bagian akhir dari container.
  • space-between: digunakan untuk memposisikan item dengan even space diantara baris, dimana item pertama akan diposisikan pada baris pertama dan item terakhir akan diposisikan pada baris terakhir dan item lainnya akan menempati sisa ruang yang tersedia pada container.
  • space-around: digunakan untuk memposisi item dengan space yang sama dengan space yang ada disekitarnya.
  • initial: digunakan untuk mengatur properti alignContent ke nilai default-nya.
  • inherit: berisi turunan nilai properti dari properti parent-nya.

Return Value: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan properti align-content dari suatu elemen.

Baca Juga:

Contoh: menggunakan nilai stretch.

<!DOCTYPE html>

<html>


<head>


<style>

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;

/* mengatur space-around untuk 

mengopservasi dampak dari 

'stretch'*/

align-content: space-around;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>


<title>

Properti DOM Style 

alignContent

</title>


</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"stretch".

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div style="background-color:green;">

TIK

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"stretch";

}

</script>

 

</body>

 

</html>


Contoh: menggunakan nilai center.

<!DOCTYPE html>

<html>

 

<head>


<style>

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>


<title>

Properti DOM Style 

alignContent

</title>


</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"center"

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div 

style="background-color:green;">

TIK

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"center";

}

</script>

 

</body>

 

</html>


Contoh: menggunakan nilai flex-start.

<!DOCTYPE html>

<html>

 

<head>


<style>

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>


<title>

Properti DOM Style 

alignContent

</title>


</head>

 

<body>

 

<h1 

style="color: green">

Blog

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"flex-start"

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div 

style="background-color:green;">

TIK

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"flex-start";

}

</script>

 

</body>

 

</html>


Contoh: menggunakan nilai flex-end.

<!DOCTYPE html>

<html>

 

<head>


<style>

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>


<title>

Properti DOM Style 

alignContent

</title>


</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"flex-end"

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div 

style="background-color:green;">

TIK

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"flex-end";

}

</script>

 

</body>

 

</html>


Contoh: menggunakan nilai space-between.

<!DOCTYPE html>

<html>

 

<head>

 

<style>

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>

 

<title>

Properti DOM Style 

alignContent

</title>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"space-between"

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div 

style="background-color:green;">

TIK

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"space-between";

}

</script>

 

</body>

 

</html>


Contoh: menggunakan nilai space-around.

<!DOCTYPE html>

<html>

 

<head>

 

<style>

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>

 

<title>

Properti DOM Style 

alignContent

</title>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"space-around"

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div 

style="background-color:green;">

TIK

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"space-around";

}

</script>

 

</body>

 

</html>


Contoh: menggunakan nilai initial.

<!DOCTYPE html>

<html>

 

<head>

 

<style>

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;

/* mengatur space-around untuk 

mengobservasi dampak dari 

'initial' */

align-content: space-around;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>

 

<title>

Properti DOM Style 

alignContent

</title>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"initial".

</p>

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div 

style="background-color:green;">

TIK

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"initial";

}

</script>

 

</body>

 

</html>


Contoh: menggunakan nilai inherit.

<!DOCTYPE html>

<html>

 

<head>

 

<style>

#parent 

{

/* Mengatur align-content dari 

parent untuk mengobservasi 

dampak dari 'inherit' */

align-content: flex-end;}

 

.main 

{

width: 250px;

height: 300px;

border: 1px solid;

display: flex;

flex-flow: row wrap;}

 

.main div 

{

width: 250px;

height: 70px;

font-size: 2rem;

text-align: center;}

</style>

 

<title>

Properti DOM Style 

alignContent

</title>

 

</head>

 

<body>

 

<h1 

style="color: green">

Blog Elfan

</h1>

 

<b>

DOM Style alignContent

</b>

 

<p>

Klik tombol untuk mengubah 

nilai dari alignContent ke 

"inherit".

</p>

 

<div id="parent">

 

<div class="main">

 

<div 

style="background-color:green;">

Blog

</div>

 

<div 

style="background-color:lightgreen;">

Guru

</div>

 

<div 

style="background-color:green;">

TIK

</div>

 

</div>

 

</div>

 

<button 

onclick="changeAlign()">

Change alignContent

</button>

 

<script>

function changeAlign() 

{

document.querySelector('.main').style.alignContent =

"inherit";

}

</script>

 

</body>

 

</html>


Artikel ini didedikasikan kepada: Danang Setyo Handoko, Dani Alfian, Da'Ani Zulfa Nisfatullaili, Denny Wahyu Pramudya, dan Deo Budhi Anggitlistio.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Menentukan Nilai Rataan Teks HTML alignContent Style DOM"

  1. AnonimRabu, 06 April 2022 pukul 12.25.00 WIB

    Jenis browser apa saja yang dapat digunakan untuk mengaktifkan properti alignmentContent Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimRabu, 06 April 2022 pukul 12.26.00 WIB

      Berikut adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti alignmentContent Style DOM pada HTML:
      1. Google Chrome 21.0
      2. Internet Explorer 11.0
      3. Firefox 28.0
      4. Opera 12.1
      5. Safari 7.0

      Hapus
  2. AnonimSelasa, 19 April 2022 pukul 08.42.00 WIB

    Apa fungsi properti alignmentContent Style DOM pada HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 19 April 2022 pukul 08.43.00 WIB

      Properti alignContent style DOM HTML berfungsi untuk menyelaraskan item container fleksibel ketika item tidak menggunakan semua ruang yang tersedia pada sumbu vertikal.

      Catatan: gunakan properti justifyContent untuk menyetarakan item pada sumbu horizontal, dimana pada penggunaannya harus terdapat beberapa baris item lain agar properti ini memiliki efek pada dokumen yang ditampilkan.

      Hapus
    2. AnonimSelasa, 19 April 2022 pukul 08.44.00 WIB

      Properti style alignmentContent merupakan properti yang digunakan untuk menyelaraskan item dalam flexbox atau grid.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -