Cara menggunakan content size css

Property font-size-Adjust digunakan untuk menentukan ukuran font berdasarkan tinggi-x (tinggi huruf kecil) font, bukan tinggi utama font.

Di web, Kalian tidak selalu dapat menjamin font-family apa yang akan digunakan. Menggunakan property font-family, Kalian bisa menentukan daftar font-family, dimulai dengan font-family pilihan, dan kemudian daftar fallback ketika keluarga pilihan tidak tersedia atau gagal memuat karena alasan apa pun.

Tetapi tidak semua keluarga font memiliki karakteristik yang sama dan terlihat sama pada ukuran yang berbeda. Sebagai contoh, keluarga font sans-serif biasanya lebih mudah dibaca pada ukuran kecil tertentu daripada font serif pada ukuran yang sama. Ini terutama karena perbedaan ukuran huruf kecil font.

Ukuran font ditentukan oleh tinggi font, dan tinggi x font adalah tinggi huruf kecil (biasanya huruf ‘x’ digunakan sebagai referensi, maka nama tinggi x).

Menggunakan tinggi dan tinggi x font, setiap font memiliki rasio aspek, yang merupakan rasio tinggi x terhadap tinggi font.

Lebih tepatnya, rasio aspek dihitung dengan membagi x-tinggi font dengan ukuran font (tingginya).

Properti font-size-Adjust digunakan untuk menentukan ukuran font berdasarkan pada ketinggian x font, bukan ketinggian font. Ini sangat berguna karena memungkinkan kita untuk menyesuaikan ukuran font wajah font tertentu agar lebih mudah dibaca, terutama jika Anda harus menggunakan wajah font sekunder yang rasio aspeknya tidak sama dengan keluarga font utama Anda. menggunakan.

Nilai penyesuaian ukuran font kemudian diatur sehingga sama dengan nilai rasio aspek font primer. Misalnya, jika font utama Anda memiliki rasio aspek 0,58, maka Anda akan menggunakan penyesuaian ukuran font: 0,58 untuk memastikan bahwa font sekunder apa pun — termasuk font pengganti apa pun — akan menghormati rasio aspek itu dan disesuaikan dengan itu. nilai jika / saat digunakan.

Berikut ini adalah contoh yang menggunakan dua kelompok font: ‘Verdana’ sebagai font pilihan, dan ‘Times New Roman’ sebagai font pengganti. Contohnya diambil dari alat ini. Alat ini menunjukkan rasio aspek dari keluarga pilihan pertama, yang dalam hal ini adalah ‘Verdana’. Kemudian, ini menunjukkan bagaimana kedua font akan terlihat jika tidak ada penyesuaian ukuran font yang diterapkan. Dan kemudian itu menunjukkan bagaimana font ‘Times New Roman’ disesuaikan dengan tinggi x yang sama dengan ‘Verdana’ dengan menggunakan properti penyesuaian ukuran font dengan nilai rasio aspek font ‘Verdana’.

Alat yang disebutkan di sini adalah cara yang bagus untuk memvisualisasikan cara kerja properti penyesuaian ukuran font. Alat lain oleh pengembang yang sama juga tersedia yang memungkinkan Anda untuk mendapatkan aspek rasio dari semua font yang diinstal pada sistem Anda sebagai tabel rasio aspek.

Agar properti penyesuaian ukuran font kompatibel dengan browser yang tidak mendukungnya, properti tersebut ditentukan sebagai angka yang dikalikan dengan properti ukuran font. Jadi, browser yang mendukungnya akan menyesuaikan ukuran font dari font pengganti, dan browser yang tidak mendukungnya hanya akan mengabaikannya dan hasil rendering font tidak akan terpengaruh. Seperti disebutkan sebelumnya, nilai properti penyesuaian ukuran font biasanya rasio aspek dari font pilihan pertama yang Anda ingin semua font pengganti disesuaikan. Contoh:

Metodenya sendiri sebenarnya tidak terlalu sulit untuk dipahami. Akan tetapi, sulit di sini lebih kepada banyaknya cara untuk memusatkan sesuatu.

Metode yang kamu gunakan dapat berbeda tergantung dengan elemen HTML yang kamu sedang coba untuk dipusatkan, atau apakah kamu ingin membuatnya di tengah secara horizontal atau vertikal.

Dalam tutorial ini, kami akan menjelaskan bagaimana memusatkan elemen-elemen yang berbeda secara horizontal, vertikal, dan juga secara horizontal dan vertikal sekaligus.

Cara Membuat Elemen di Tengah Secara Horizontal

Memusatkan elemen di tengah secara horizontal biasanya lebih mudah dibandingkan secara vertikal. Berikut adalah beberapa elemen umum yang mungkin ingin kamu pusatkan secara horizontal beserta beberapa cara yang berbeda untuk memusatkannya.

Cara Memusatkan Teks Menggunakan Properti CSS Text-Align Center

Untuk memusatkan teks atau tautan secara horizontal, gunakan properti

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Pusatkan secara horizontal*/
  text-align: center;
}

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <p>Hello, (centered) World!</p>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Pusatkan secara horizontal*/
  text-align: center;
}

Cara Memusatkan Div Menggunakan Margin Auto CSS

Gunakan properti

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

Cara Memusatkan Div Secara Horizontal Menggunakan Flexbox

Flexbox adalah cara paling modern untuk membuat elemen di tengah pada suatu halaman, dan ia membuat proses desain layout responsif lebih mudah dibandingkan sebelumnya. Akan tetapi, flexbox belum sepenuhnya didukung pada beberapa browser lama seperti Internet Explorer.

Untuk membuat elemen di tengah secara horizontal menggunakan Flexbox, terapkan

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Pusatkan child secara horizontal*/
  display: flex;
  justify-content: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

Cara Membuat Elemen di Tengah Secara Vertikal

Menempatkan elemen di tengah secara vertikal tanpa menggunakan metode modern seperti Flexbox bisa menjadi pekerjaan yang sulit. Di sini, kita akan membahas beberapa metode lama yang digunakan untuk memusatkan elemen di tengah secara vertikal dulu, lalu menunjukkan cara melakukannya dengan Flexbox.

Cara Menempatkan Div di Tengah Secara Vertikal dengan Pemosisian Absolut dan Margin Negatif CSS

Untuk waktu yang lama, ini merupakan cara untuk menempatkan elemen-elemen di tengah secara vertikal. Untuk metode ini kamu harus mengetahui tinggi elemen yang ingin kamu pusatkan.

Pertama-tama, isi properti

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

Kemudian, untuk elemen child, isi properti

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Atur */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara vertikal */
  position: absolute;
  top: 50%;
}

Tetapi, ini hanya memusatkan sisi atas dari elemen child.

Supaya betul-betul memusatkan elemen child, atur properti

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Atur */
  position: relative;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara vertikal */
  position: absolute;
  top: 50%;
  margin-top: -25px; /* Setengah tinggi elemen ini */
}

Cara Menempatkan Div di Tengah Secara Vertikal Menggunakan Transform dan Translate

Kalau kamu tidak tahu tinggi elemen yang kamu ingin pusatkan (atau meskipun kamu tahu juga), metode ini adalah trik yang bagus.

Metode ini sangat mirip dengan metode margin negatif di atas. Atur properti

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

Untuk elemen child, atur properti

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Pusatkan secara horizontal*/
  text-align: center;
}

Ingat bahwa

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

Cara Membuat Div di Tengah Secara Vertikal dengan Flexbox

Seperti memusatkan elemen secara horizontal, Flexbox membuat memusatkan elemen secara vertikal menjadi sangat gampang.

Untuk memusatkan elemen secara vertikal, terapkan

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Pusatkan secara horizontal*/
  text-align: center;
}

Cara Memusatkan Elemen Secara Vertikal dan Horizontal

Cara Menempatkan Div di Tengah dengan Pemosisian Absolut dan Margin Negatif CSS

Ini sangat mirip dengan metode di atas untuk memusatkan elemen secara vertikal. Seperti sebelumnya, kamu harus mengetahui lebar dan tinggi elemen yang mau kamu pusatkan.

Atur properti

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

Kemudian atur properti

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Pusatkan child secara horizontal*/
  display: flex;
  justify-content: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

Supaya betul-betul memusatkan elemen child, terapkan margin negatif atas, atur menjadi setengah tinggi elemen, dan margin negatif kiri, atur menjadi setengah lebar elemen child:

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Pusatkan secara horizontal*/
  text-align: center;
}

Cara Membuat Div di Tengah Secara Vertikal dan Horizontal dengan Transform dan Translate

Gunakan metode ini untuk membuat elemen di tengah jika kamu tidak tahu dimensi persisnya dan tidak bisa menggunakan Flexbox.

Pertama-tama, atur properti

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

Kemudian, atur properti

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
  /* Pusatkan child secara horizontal*/
  display: flex;
  justify-content: center;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
}

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

.child {
  width: 50px;
  height: 50px;
  background-color: red;
  /* Pusatkan secara horizontal*/
  margin: 0 auto;
}

Terakhir, gunakan

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Pusatkan secara horizontal*/
  text-align: center;
}

Cara Membuat Div di Tengah Secara Vertikal dan Horizontal dengan Flexbox

Flexbox adalah cara yang paling gampang untuk membuat elemen di tengah secara vertikal dan horizontal.

Ini hanyalah gabungan dua metode-metode Flexbox sebelumnya. Untuk membuat elemen di tengah secara horizontal atau vertikal, terapkan

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

<div class="container">
  <div class="child"></div>
</div>

.container {
  font-family: arial;
  font-size: 24px;
  margin: 25px;
  width: 350px;
  height: 200px;
  outline: dashed 1px black;
}

p {
  /* Pusatkan secara horizontal*/
  text-align: center;
}

Itulah semua yang kamu perlu tahu mengenai cara membuat elemen di tengah menggunakan cara-cara yang terbaik. Sekarang, cobalah memusatkan semua elemennya.

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Author: Kris Koishigawa (English)

Read more posts.

Translator: Kevin Matthew

Read more posts.

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Bagaimana cara mengatur lebar dalam CSS?

CSS properti apa yang digunakan untuk menentukan ukuran teks?

Apa itu font size pada CSS?

Font Family CSS apa saja?