Bagaimana cara memusatkan teks secara vertikal dengan ikon besar font-mengagumkan?


231

Katakanlah saya memiliki tombol bootstrap dengan ikon font-mengagumkan dan beberapa teks:

<div>
    <i class='icon icon-2x icon-camera'></i>
    hello world
</div>

Bagaimana cara membuat teks tampak terpusat vertikal? Teks disejajarkan dengan tepi bawah ikon sekarang: http://jsfiddle.net/V7DLm/1/

EDIT: Saya punya solusi yang memungkinkan : http://jsfiddle.net/CLdeG/1/ tapi rasanya agak hacky - memperkenalkan tag p ekstra, menggunakan pull-left dan display: table. Mungkin seseorang bisa menyarankan cara yang lebih mudah.


2
Kamu adalah dewa. Serius, saya menghabiskan 2 jam pada hari ini, solusi Anda JAUH yang terbersih. Tidak perlu melakukan hardcode apa pun.
Chuck

pendekatan ini lebih mudah
Raveen Beemsingh

Jawaban:


304

Saya hanya harus melakukan ini sendiri, Anda harus melakukannya sebaliknya.

  • jangan bermain dengan penyelarasan vertikal teks Anda
  • bermain dengan garis vertikal ikon-font yang mengagumkan
<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

Tentu saja Anda tidak dapat menggunakan gaya sebaris dan menargetkannya dengan kelas css Anda sendiri. Tapi ini bekerja dengan cara copy paste.

Lihat di sini: Penjajaran vertikal teks dan ikon di tombol

Namun jika itu terserah saya, saya tidak akan menggunakan ikon-2x. Dan cukup tentukan ukuran font sendiri, seperti berikut ini

<div class='my-fancy-container'>
    <span class='my-icon icon-file-text'></span>
    <span class='my-text'>Hello World</span>
</div>
.my-icon {
    vertical-align: middle;
    font-size: 40px;
}

.my-text {
    font-family: "Courier-new";
}

.my-fancy-container {
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
    margin: 60px;
    padding: 10px;
}

untuk contoh kerja, silakan lihat JsFiddle


1
ya, ini solusi yang lebih baik, terima kasih. Masih tampaknya membutuhkan ketinggian garis meskipun jsfiddle.net/paulftw/F3KyK/41
Paul

1
Saya memperbarui jsfiddle Anda untuk bagaimana saya akan melakukannya. Saya menggunakan ukuran font untuk ikon alih-alih menggunakan 2x. jsfiddle.net/3GMjp/1
andxyz

Pada kode pertama Anda, tag awal <span> tidak sesuai dengan tag akhir </i>.
jzacharuk

Tidak berfungsi dengan beberapa ikon. contoh fa-angle-left
steakchaser

Penting untuk disadari bahwa menyertakan font js juga dapat memodifikasi tampilannya. Ikon saya terlalu jauh ke atas, saya menghapus js inklusi untuk melihat apa yang akan terjadi dan sekarang terlalu jauh ke bawah.
lucidbrot

53

Saya menggunakan ikon di sebelah teks 99% dari waktu jadi saya membuat perubahan secara global:

.fa-2x {
  vertical-align: middle;
}

Tambahkan 3x, 4x, dll ke definisi yang sama sesuai kebutuhan.


7
Menurut pendapat saya ini harus menjadi jawaban yang diterima, karena sejauh ini merupakan solusi paling sederhana, kecuali saya kehilangan sesuatu dalam pertanyaan awal. Terima kasih @rushonerok! Saya tidak yakin mengapa beberapa orang mengatakan untuk tidak menggunakan vertical-align: middle;- saya mungkin kehilangan sesuatu di sini. Tolong jelaskan jika demikian.
Kendall

1
@Kendall Roth Saya pikir ketika orang mengatakan untuk tidak menggunakan vertical-align: middle, artinya jika Anda menggunakan blockelemen . Jika Anda menggunakan inline, inline-blockatau table-cell, Anda harus baik. MDN:vertical-align
rinogo

Bekerja seperti pesona! Terima kasih: D
Mohammed A. Fadil

37

Setelah mempertimbangkan semua opsi yang disarankan, solusi terbersih tampaknya adalah mengatur ketinggian garis dan meluruskan segalanya vertikal:

Lihat Demo Jsfiddle

CSS:

div {
    border: 1px solid #ccc;
    display: inline-block;
    height: 50px;
    margin: 60px;
    padding: 10px;
}
#text, #ico {
    line-height: 50px;
}

#ico {
    vertical-align: middle;
}

2
Bagaimana jika kontainer Anda lebih besar dari 50px? Maka itu tidak akan berfungsi ... Saya punya konten yang mengubah ukuran dan seharusnya ikon di tengah ... tahu tentang itu?
Slaven Tomac

24

jika hal-hal tidak sesuai, sederhana line-height: inherit;melalui CSS pada elemen i.fa tertentu yang mengalami masalah penyelarasan bisa melakukan trik cukup sederhana.

Anda juga bisa menggunakan solusi global, yang karena kekhususan CSS yang sedikit lebih tinggi akan mengesampingkan aturan .fa FontAwesome yang menentukan line-height: 1tanpa memerlukan !importantproperti:

i.fa {
  line-height: inherit;
}

Pastikan saja bahwa solusi global di atas tidak menyebabkan masalah lain di tempat-tempat di mana Anda mungkin juga menggunakan ikon FontAwesome.


16

opsi flexbox - font mengagumkan 4.7 dan di bawah

FA 4.x URL yang Diinangi - https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  line-height: 40px; /* vertically size by height, line-height or padding */
  padding: 0px 10px; /* horizontal with padding-l/r */
  border: 1px solid #ccc;
}

/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh;}div i {margin-right: 10px;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(34, 100%, 52%, 0.5);cursor: pointer;}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div>
    <i class='fa fa-2x fa-camera'></i>
    hello world
</div>

biola

http://jsfiddle.net/Hastig/V7DLm/180/


menggunakan flex dan font awesome 5

FA 5.x URL yang Diinangi - https://use.fontawesome.com/releases/v5.0.8/js/all.js

div {
  display: inline-flex; /* make element size relative to content */
  align-items: center; /* vertical alignment of items */
  padding: 3px 10px; /* horizontal vertical position with padding */
  border: 1px solid #ccc;
}
.svg-inline--fa { /* target all FA icons */
  padding-right: 10px;
}
.icon-camera .svg-inline--fa { /* target specific icon */
  font-size: 50px;
}
/* unnecessary styling below, ignore */
body {display: flex;justify-content: center;align-items: center;height: 100vh; flex-direction: column;}div{margin: 10px 0;}div {background-color: hsla(0, 0%, 87%, 0.5);}div:hover {background-color: hsla(212, 100%, 63%, 1);cursor: pointer;}
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<div class="icon-camera">
    <i class='fas fa-camera'></i>
    hello world
</div>
<div class="icon-clock">
    <i class='fas fa-clock'></i>
    hello world
</div>

biola

https://jsfiddle.net/3bpjvof2/


1
Ini dapat memusatkan ikon secara vertikal dalam div, bukan hanya dalam satu baris teks. Bagus sekali!
Sean the Bean

@siapa pun terus mencoba mengedit ini - ini umumnya gaya tata letak saya untuk jawaban. Saya percaya ini membuatnya lebih mudah dibaca / dimengerti dan memungkinkan orang lebih tahu ke mana mereka pergi sebelum mengklik tautan. Dalam kasus URL Host FA, beberapa orang memiliki kebiasaan menyoroti tautan untuk menyalinnya, inilah mengapa ini ditulis secara lengkap. Tautan jsfiddle memiliki tajuk untuk memecah halaman dengan lebih baik, jika tidak lebih mudah untuk dilewatkan dan jawabannya dapat terlihat berantakan.
Hastig Zusammenstellen

11

Cara paling sederhana adalah mengatur properti vertical-align css ke tengah

i.fa {
    vertical-align: middle;
}

3
.svg-inline--fauntuk FontAwesome 5
darylknight

@darylknight, apa artinya ini? Bagaimana saya mengaktifkan / menggunakannya? Tambahkan sesuatu setelah saya fa-clockdi kelas?
Prof. Falken

5

Ini bekerja dengan baik untuk saya.

i.fa {
  line-height: 100%;
}

3

Coba atur ikon Anda sebagai height: 100%

Anda tidak perlu melakukan apa pun dengan bungkusnya (misalnya, tombol Anda).

Ini membutuhkan Font Awesome 5. Tidak yakin apakah itu berfungsi untuk versi FA yang lebih lama.

.wrap svg {
    height: 100%;
}

Perhatikan bahwa ikon tersebut sebenarnya adalah svggrafik.

Demo


2

Bagi mereka yang menggunakan Bootstrap 4 sederhana:

<span class="align-middle"><i class="fas fa-camera"></i></span>

Ini tidak menggunakan perataan vertikal: tengah yang diterapkan oleh kelas ini hanya menargetkan tabel.
Lucas Manzke

1

Pilihan lain untuk menyempurnakan ketinggian garis ikon adalah dengan menggunakan persentase vertical-alignproperti. Biasanya, 0% adalah bagian bawah, dan 100% di bagian atas, tetapi orang dapat menggunakan nilai negatif atau lebih dari seratus untuk membuat efek yang menarik.

.my-element i.fa {
    vertical-align: 100%; // top
    vertical-align: 50%; // middle
    vertical-align: 0%; // bottom
}

1

Saya akan membungkus teks dalam sehingga Anda dapat menargetkannya secara terpisah. Sekarang jika Anda mengapung keduanya dan kiri, Anda dapat menggunakan ketinggian garis untuk mengontrol spasi vertikal. Mengaturnya ke ketinggian yang sama dengan (30px) akan sejajar tengahnya. Lihat di sini .

Markup Baru:

 <div>
    <i class='icon icon-2x icon-camera'></i>
    <span id="text">hello world</span>
</div>

CSS baru:

div {
    border: 1px solid #ccc;
    height: 30px;
    margin: 60px;
    padding: 4px;
    vertical-align: middle;
}
i{
    float: left;
}
#text{
    line-height: 30px;
    float: left;
}

4
Perataan vertikal tidak melakukan apa pun pada elemen blok, ini hanya bekerja pada elemen sel inline atau tabel.
cimmanon

Begitu ya, pengaturan line-height = tinggi kontainer dan hal-hal apung yang tersisa berfungsi dan tidak perlu mengetik. Berikut biola yang diperbarui dengan pengurangan noise: jsfiddle.net/F3KyK/7
Paul

Lebih baik hanya mengatur vertical-align: middleikon dan teks. Dengan begitu Anda tidak membuat asumsi tentang ketinggian ikon dan ada lebih sedikit CSS.
Maros

0

Saat menggunakan flexbox, penjajaran vertikal ikon-ikon mengagumkan font di sebelah teks bisa sangat sulit. Saya mencoba margin dan bantalan, tetapi itu memindahkan semua item. Saya mencoba keberpihakan flex yang berbeda seperti center, start, baseline, dll, tetapi tidak berhasil. Cara termudah dan terbersih untuk menyesuaikan hanya ikon adalah dengan mengaturnya mengandung div ke position: relative; top: XX;Ini melakukan pekerjaan dengan sempurna.


0

Nah, pertanyaan ini ditanyakan bertahun-tahun yang lalu. Saya pikir teknologi telah berubah sedikit dan kompatibilitas browser jauh lebih baik. Anda dapat menggunakan vertical-align tetapi saya akan mempertimbangkan bahwa beberapa yang kurang dapat diukur dan kurang dapat digunakan kembali. Saya akan merekomendasikan pendekatan flexbox .

Berikut adalah contoh yang sama dengan poster asli yang digunakan tetapi dengan flexbox. Ini gaya elemen tunggal. Jika ukuran tombol berubah karena alasan apa pun, maka akan terus terpusat secara vertikal dan horizontal.

.button {
    border: 1px solid #ccc;
    height: 40px;
    margin: 60px;
    padding: 4px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

Contoh: JsFiddle


0

Cukup tentukan vertical-alignproperti untuk elemen ikon:

div .icon {
   vertical-align: middle;
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.