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

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.

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

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.

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;
}

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.

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/

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

i.fa {
    vertical-align: middle;
}

Ini bekerja dengan baik untuk saya.

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

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

Bagi mereka yang menggunakan Bootstrap 4 sederhana:

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

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
}

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;
}

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.

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

Cukup tentukan vertical-alignproperti untuk elemen ikon:

div .icon {
   vertical-align: middle;
}