Yazı tipi harika bir simge ile metni dikey olarak nasıl ortalayabilirim?

Diyelim ki bir font-awesome simgesi ve bazı metin ile bir bootstrap düğme var:

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

Metnin dikey olarak ortalanmasını nasıl sağlayabilirim? Metin şimdi simgenin alt kenarı ile hizalanır: http://jsfiddle.net/V7DLm/1/

DÜZENLEME: Olası bir çözümüm var : http://jsfiddle.net/CLdeG/1/ ama biraz huzursuz hissettiriyor - ekstra p etiketi getiriyor, sol-sola ve display: table kullanıyor. Belki birisi daha kolay bir yol önerebilir.

Sadece kendim yapmak zorunda kaldım, bunu başka şekilde yapmanız gerekiyor.

• yok metnin vertical-align ile oynamak
• harika yazı tipi simgesinin dikey hizalaması ile oyna

<div>
  <span class="icon icon-2x icon-camera" style=" vertical-align: middle;"></span>
  <span class="my-text">hello world</span>
</div>

Elbette satır içi stilleri kullanamaz ve kendi css sınıfınızla hedefleyemezsiniz. Ancak bu bir kopyala yapıştırma tarzında çalışır.

Buraya bakın: Düğmedeki metnin ve simgenin dikey hizalaması

Bana kalmış olsaydı, 2x simgesini kullanmazdım. Ve sadece aşağıdaki gibi yazı tipi boyutunu kendim belirtin

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

çalışan bir örnek için lütfen JsFiddle'a bakın

% 99 oranında metnin yanındaki simgeleri kullanıyorum, bu yüzden değişikliği global olarak yaptım:

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

3x, 4x, vb. Gerektiği gibi aynı tanıma ekleyin.

Önerilen tüm seçenekleri düşündükten sonra, en temiz çözüm satır yüksekliğini ayarlamak ve her şeyi dikey hizalamak gibi görünüyor:

Bkz Jsfiddle Demosu

CSS:

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

#ico {
    vertical-align: middle;
}

işler sıraya line-height: inherit;gelmiyorsa, hizalama sorunları olan belirli i.fa öğelerinde CSS yoluyla basit bir işlem, işi yeterince yapabilir.

Ayrıca, biraz daha yüksek bir CSS özgüllüğü nedeniyle , özellik line-height: 1gerektirmeden belirten FontAwesome'in .fa kuralını geçersiz kılacak olan küresel bir çözümü de kullanabilirsiniz !important:

i.fa {
  line-height: inherit;
}

Yukarıdaki küresel çözümün FontAwesome simgelerini de kullanabileceğiniz yerlerde başka sorunlara neden olmadığından emin olun.

bir flexbox seçeneği - yazı tipi harika 4.7 ve altı

FA 4.x Barındırılan URL - 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>

Vaktini boşa harcamak

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

flex ve font awesome 5 kullanarak

FA 5.x Barındırılan URL - 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>

Vaktini boşa harcamak

https://jsfiddle.net/3bpjvof2/

En basit yol, dikey hizalama css özelliğini ortaya ayarlamaktır

i.fa {
    vertical-align: middle;
}

Bu benim için iyi çalıştı.

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

Simgenizi şu şekilde ayarlamayı deneyin: height: 100%

Sarıcı ile herhangi bir şey yapmanıza gerek yoktur (örneğin, düğmeniz).

Bunun için Font Awesome 5 gerekir. Eski FA sürümleri için çalışıp çalışmadığından emin değilsiniz.

.wrap svg {
    height: 100%;
}

Simgenin aslında bir svggrafik olduğunu unutmayın.

gösteri

Bootstrap 4 kullananlar için basit:

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

Bir simgenin satır yüksekliğine ince ayar yapmak için başka bir seçenek de vertical-alignözelliğin bir yüzdesini kullanmaktır . Genellikle,% 0 en altta ve% 100 en üstte, ancak ilginç efektler oluşturmak için negatif değerler veya yüzden fazla kullanılabilir.

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

Metni ayrı bir şekilde hedefleyebilmeniz için bir metni sararım. Şimdi hem sola hem de sola yüzerseniz, dikey aralığını kontrol etmek için satır yüksekliğini kullanabilirsiniz. (30 piksel) ile aynı yüksekliğe ayarlandığında, orta hizalanır. Buraya bakın .

Yeni İşaretleme:

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

Yeni CSS:

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

Bir flexbox kullanırken, metnin yanındaki harika yazı tipi simgelerinin dikey hizalanması çok zor olabilir. Kenar boşluklarını ve dolguları denedim, ancak bu tüm öğeleri taşıdı. Merkez, başlangıç, taban çizgisi gibi farklı esnek hizalamaları boşuna denedim. Yalnızca simgeyi ayarlamanın en kolay ve en temiz yolu div içerdiğini ayarlamaktı. position: relative; top: XX;Bu işi mükemmel bir şekilde yaptı.

Bu soru yıllar önce sorulmuştu. Teknolojinin biraz değiştiğini ve tarayıcı uyumluluğunun çok daha iyi olduğunu düşünüyorum. Dikey hizalama kullanabilirsiniz, ancak bazılarının daha az ölçeklenebilir ve daha az yeniden kullanılabilir olduğunu düşünürdüm. Bir flexbox yaklaşımı öneriyorum .

Burada kullanılan orijinal posterle aynı örnektir ancak flexbox ile. Tek bir öğeyi stilize eder. Herhangi bir nedenden dolayı düğme boyutu değişirse, dikey ve yatay olarak ortalanmaya devam eder.

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

Örnek: JsFiddle

vertical-alignSimge öğesi için özelliği tanımlamanız yeterlidir :

div .icon {
   vertical-align: middle;
}