Cara Memusatkan Pautan dalam CSS

Cara Memusatkan Pautan Dalam Css



Sebarang elemen yang kami tambahkan dalam HTML dipaparkan di sudut kiri atas skrin secara lalai. Walaupun, anda boleh mengubah suai kedudukan lalai elemen dengan menggunakan sifat CSS yang berbeza. Begitu juga, apabila kami menambah pautan, ia dipaparkan pada kedudukan lalainya, tetapi anda boleh menjajarkannya di tengah menggunakan sifat CSS.

Terdapat dua kaedah untuk memusatkan pautan:

Dalam artikel ini, kami akan menerangkan kedua-dua kaedah untuk memusatkan pautan. Jadi, mari kita mulakan!







Kaedah 1: Pusatkan Pautan dalam CSS Menggunakan Harta penjajaran teks

Untuk memusatkan pautan dalam HTML, kami akan menggunakan ' penjajaran teks ” harta CSS. ' penjajaran teks ” sifat dalam CSS digunakan untuk melaraskan penjajaran teks seperti penjajaran kiri, kanan, tengah dan mewajarkan.



Sintaks



Sintaks sifat penjajaran teks ialah:





penjajaran teks : nilai

Di tempat ' nilai ”, anda boleh menetapkan penjajaran teks seperti kiri, kanan, tengah dan justify.

Sekarang, kita akan menggunakan ' penjajaran teks ” untuk menyelaraskan ke tengah pautan yang diberikan.



Contoh

Untuk memusatkan pautan pada halaman web, kami akan menambah pautan dalam HTML di dalam teg . Untuk berbuat demikian, gunakan teg untuk menentukan hiperpautan dan memberikan alamat tapak yang diperlukan. Selepas itu, nyatakan nama pautan. Dalam kes kami, kami telah menambahkan pautan ke tapak web Linuxhint kami.

HTML

<
badan >

< a href = “https://linuxhint.com/” > Linux < / a >

< / badan >

Imej yang disediakan di bawah menunjukkan bahawa pautan ditambahkan yang diletakkan di sebelah kiri secara lalai:

Sekarang beralih ke CSS untuk memusatkan pautan.

Di sini, kami akan menggunakan ' a ” untuk mengakses pautan yang ditambahkan. Selepas itu, tetapkan nilai penjajaran teks sebagai “ pusat ” dan paparkan sebagai “ blok ”. Akibatnya, elemen akan ditambah sebagai elemen blok, bermula pada baris baharu dan mengambil keseluruhan lebar.

CSS

a {

penjajaran teks : pusat ;

paparan : blok ;

}

Catatan: Ciri penjajaran teks CSS tidak berfungsi bersendirian untuk memusatkan teg. Oleh itu, anda mesti menggunakan ' paparan ' harta dan tetapkan nilainya ' blok ” untuk memusatkan pautan.

Sekarang, beralih ke HTML dan laksanakannya untuk melihat hasil berikut. Di sini, anda boleh melihat bahawa pautan itu dijajarkan di tengah halaman web:

Mari beralih ke kaedah kedua untuk menyelaraskan pautan di tengah.

Kaedah 2: Pusat Pautan dalam CSS Menggunakan Harta 'margin'.

Dalam CSS, ' margin ” hartanah digunakan untuk memusatkan pautan. Ia adalah sifat singkatan daripada “ margin-kiri ”, “ margin-kanan ”, “ margin-top ”, dan “ margin-bawah ” hartanah. Anda boleh menetapkan nilai semua sifat yang diberikan dalam satu baris.

Sintaks

Sintaks sifat margin ialah:

margin : auto | atas betul bawah ditinggalkan

Perihalan sintaks yang disediakan di atas diberikan di bawah:

  • auto: Ia digunakan untuk menetapkan elemen mengikut penyemak imbas.
  • atas: Ia digunakan untuk menetapkan margin dari atas.
  • betul: Ia digunakan untuk menetapkan margin dari kanan.
  • butang: Ia digunakan untuk menetapkan margin dari bawah.
  • ditinggalkan: Ia digunakan untuk menetapkan margin dari kiri.

Catatan: Menentukan dua nilai akan menandakan margin dari atas dan bawah dan margin dari kiri dan kanan; namun, jika satu nilai ditambah, margin akan digunakan pada keempat-empat sisi.

Mari kita beralih ke contoh, di mana kita akan memusatkan pautan menggunakan ' margin ” harta benda.

Contoh

Mula-mula tetapkan nilai sifat paparan sebagai ' blok ' dan lebar sebagai ' 70px ”. Selepas itu, gunakan sifat margin dan tetapkan nilainya kepada “ auto ”:

a {

paparan : blok ;

lebar : 70px ;

margin : auto ;

}

Catatan: ' paparan ” dan “ lebar ” harta perlu ditetapkan; jika tidak, ' margin ” harta tidak akan berfungsi. Nilai sifat lebar boleh ditetapkan mengikut resolusi skrin paparan dan panjang teks.

Anda boleh melihat daripada imej yang diberikan bahawa pautan berjaya dipusatkan:

Itu sahaja! Kami menerangkan kaedah untuk memusatkan pautan.

Kesimpulan

' penjajaran teks ” dan “ margin harta ” digunakan untuk memusatkan pautan dengan sumbangan “ paparan ” dan “ lebar ” harta. Sifat paparan diperlukan bersama-sama dengan sifat penjajaran teks, semasa menggunakan sifat margin, kedua-dua sifat paparan dan lebar adalah wajib untuk memusatkan pautan. Panduan ini telah membincangkan kaedah yang berbeza untuk memusatkan pautan dalam CSS.