Metinle hizala simgeleri

Question

Simgeleri (sol) ve metni (sağ) veya soldaki karşıt metni ve sağdaki simgeyi hizalamanın en iyi yolu nedir?

Simge görüntüsü ve metni aynı boyutta mı olmalı? İdeal olarak onların farklı olmasını ve aynı dikey hizada olmasını isterim.

Simgeleri daha büyük bir görüntüden almak için arka plan konumu css özelliğini kullanıyorum.

Şimdi bunu nasıl yapıyorum, ama aynı çizgide olmalarını veya dikey olarak dibe hizalanmasını sağlıyorum.

Metin

Bu senin önerileri deneyin sonra ne alıyorum.

Metin artık simgeyle hizalanmış olsa da, istediğim simgenin sağındaki simgenin üzerine eklenir. Simgeyi daha büyük bir resim grubundan göstermek için arka plan konumunu kullanıyorum. Temelde

Ben Sen

<p style='line-height: 30px'> 
    <img src='icon.gif' style='vertical-align: middle' />Icon Text 
</p> 

Alternatif dikey-align ve çizgi yüksekliği kullanarak aynı satırda yapabiliriz

<icon><10px><text_and_unwanted_icon_to_the_right_under_it> 
<span class="group3_drops_icon group3_l_icon" style="">50</span> 

group3_drops_icon { 
background-position:-50px -111px; 
} 

.group3_l_icon { 
-moz-background-clip:border; 
-moz-background-inline-policy:continuous; 
-moz-background-origin:padding; 
background:transparent url(/images/group3.png) no-repeat scroll left center; 
height:35px; 
overflow:hidden; 
padding-left:55px; 
} 

Answer 1

genellikle background kullanımı:

<style type="text/css"> 
.icon { 
background-image: url(path/to/my/icon.jpg); 
background-position: left center; 
background-repeat: no-repeat; 

padding-left: 16px; /* Or size of icon + spacing */ 
} 
</style> 

<span class="icon">Some text here</span> 

Answer 2

alıyorum, hiç tekrarı ile arka plan yaklaşımı gidebilir ve konumlandırma:

span.icontext { 
    background: transparent url(icon.gif) no-repeat inherit left center; 
    padding-left: 10px /* at least the width of the icon */ 
} 

<span class="icontext"> 
    Icon Text 
</span> 

Answer 3

Ne yazık ki, bu cevapların ikisi de kurşun geçirmez ve her birinin büyük bir hatası var.

@rossipedia Tüm simgelerini bu şekilde uygular ve oldukça iyi çalışır. Ancak, bu büyük bir şey ancak sprite'larla çalışmaz, çünkü simgeyi kapsayıcınızın bulunduğu kapsayıcının içine yerleştirmek için arka plan konumu özelliğini kullanıyorsunuz. Ve performansınız ve SEO için kötü olan sprite'ları kullanmamanız, onları iyi bir modern web sitesi için zorunlu kılıyor.

@Jamie Wong İlk çözümde iki işaretleme hatası var. Öğeleri semantik olarak doğru bir şekilde kullanmak, bazıları tarafından ne yazık ki azdır, ancak arama motoru sıralamanızda formun öncelik sırasındaki avantajları göreceksiniz. Her şeyden önce, içerik bir paragraf olmadığı zaman bir p-etiketi kullanmamalısınız. Bunun yerine span kullanın. İkincisi, img etiketi içeriği için yalnızca içindir. Çok özel durumlarda, bu kuralı göz ardı etmeniz gerekebilir, ancak bu onlardan biri değildir.

Çözümüm: Sana yalan söylemeyeceğim, zamanımın çoğunda kontrol ettim ve IMHO en uygun çözüm yok. Bu iki çözüm olsa da, bu en yakın gelenler şunlardır:

Inline-Blok Çözüm

HTML: 
<div class="container"> 
    <div class="icon"></div> 
    <span class="content">Hello</span> 
</div> 

CSS: 
.container { 
    margin-top: 50px; 
} 

.container .icon { 
    height: 30px; 
    width: 30px; 
    background: #000; 
    display: inline-block; 
    vertical-align: middle; 
} 
.container .content { 
    display: inline-block; 
    vertical-align: middle; 
} 

"display: inline-block;" güzel bir şey. Onunla çok şey yapabilir ve duyarlı tasarımla çok güzel oynar. Ancak, müşterinize bağlıdır. Inline-Block IE6, IE7 ile iyi çalışmıyor ve hala IE8 ile ilgili sorunlara neden oluyor. Kişisel olarak artık IE6 ve 7'yi desteklemiyorum, ancak IE8 hala orada. Müşterinizin IE8'de kullanılabilmesi için web sitesine gerçekten ihtiyacı varsa, satır içi satırın ne yazık ki seçeneği yoktur. Bunu önce değerlendirin. Simge elemanının siyah arka planını hareketli grafiğinizle değiştirin, konumlandırın, orada tekrarlama yapmayın, orada var. Oh evet, ve artı olarak, metni dikey hizalama ile istediğiniz şekilde hizalayabilirsiniz.

P.S. .: Herkes doldurmaya olarak nasıl bir öneri varsa, orada boş bir HTML etiketinin olduğunu farkındayım, ben müteşekkir olurum.

Sabit Yükseklik Çözüm

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
} 
.container { 
    margin-top: 50px; 
    border: 1px solid #000; 
} 

.container .icon { 
    height: 30px; 
    width: 30px; 
    background: #000; 
    float:left; 
} 
.container .content { 
    line-height: 30px; 
    float: left; 
    display: block; 
} 

ben bunu nefret ediyorum. Metin için sabit bir çizgi yüksekliği kullanır ve Simge kutusunun yüksekliğini seçerseniz, metin bu yüksekliğe ortalanır. Metni en üste hizalamak için, hat yüksekliğini ve tabana doğru olanı kesinleştirmek için bunu şu konumla sabitlemeniz gerekir: mutlak ve kap için sabit genişlik ve yükseklik. Birisi bunu istemediği sürece buna katlanmayacağım çünkü kendisi için bir sorun teşkil ediyor ve beraberinde bir çok dezavantaj getiriyor. Bu yolun ana dezavantajı sabit yüksekliktir. Sabit yükseklikler her zaman esnek değildir ve özellikle metinle birlikte, birtakım sorunlara neden olabilir (Artık metni bir kullanıcı olarak kesmeden ve daha sonra farklı tarayıcılar metni farklı şekilde ölçeklendiremezsiniz). Bu nedenle, hiçbir tarayıcıda metnin kesildiğinden ve satır yüksekliğinde bir miktar serseri odasının olduğundan emin olun. P.S .: Konteyner için açıklığı unutma. Ve tabii ki, siyah arka planınızı hareketli grafiğinizle değiştirin ve konumuna + tekrar etmeyin. inline-block mümkünse

Sonuç

kullanın. ;) Değilse, derin nefes alın ve ikinci çözümü deneyin.