İç metin ve karakterin iç boşluk/karakter iç içe yerleştirilmeden yatay elemanlı ek elemanlar

Bazı fantezi yinelenmeyen arka plana sahip bir div (şekil 1) var ve içine bir metin (aslında, 1 veya 2 karakter) yerleştirmek istiyorum. Arka plan asimetrik olduğundan, metni görüntünün bir bölümüne göre ortalamak istiyorum (şekil 2). İdeal ben yatay istediğim gibi merkezli alamayan, ben dikey konumlandırma Ancakİç metin ve karakterin iç boşluk/karakter iç içe yerleştirilmeden yatay elemanlı ek elemanlar

div.button { 
    font-size: 40px; 
    line-height: 72px; 
    padding-top: 0; 
}

tarafından halletmek başardı 3.

şekildeki gibi görünmek istiyorum: text-align: center, Şekil 4'te (örneğin, div genişliğine göre ortalanmış) ve padding değerlerinin hiçbir etkisi olmadığını gösterir.

İçine başka bir div girebiliyorum, uygun şekilde boyutlandırabilir ve metnimi içine yerleştirebiliyorum. Ancak, ek unsurları yerleştirmeden bunu yapmanın bir yolu var mı? Mesele, sayfamda oluşturulmuş yüzlerce kişiyim ve hepsinin etkinlik işleyicileri var, bu yüzden ek iç içe geçmiş öğelerle uğraşmaktan çok çirkin metin merkezini hoşgörmeye yeğlerim.

JSFiddle: sola mektup taşımak için text-indent ekleyebilir bazı garip nedenle https://jsfiddle.net/qnxs2ky5/

kaynak

2016-02-09 Taosique

div.button css kuralı için bir dolgu sağlamayı denediniz mi? – Marc

Bu böyle bir şey mi? https://jsfiddle.net/bcnwauxw/ – Marc

Birkaç seçeneğiniz var. 1. Metnin tam olarak hizalanması için özel bir dolgu/kenar boşluğu kullanın, ancak bu her biri için el ile yapılmalıdır. 2. Görüntünün alanından bir boşluk oluşturun ve metninizi bunun içine ekleyin (ortalanmış). Görüntü koordinatlarına göre hizalanacak CSS özelliği yoktur, sadece diğer öğelere. – Druzion

; senin örneğin mükemmel görünmek -10px, ama daha esnek olmaya yanı em kullanabilirsiniz varsayalım için

div.tile { 
 
    width: 88px; 
 
    height: 123px; 
 
    text-align: center; 
 
    font-size: 72px; 
 
    line-height: 104px; 
 
    color: #FF0000; 
 
    text-indent:-10px; 
 
    background-image: url('data:image/gif;base64,R0lGODlhWAB7AIAAAAAAAP///ywAAAAAWAB7AAAC/4xvoMvtD6N8qNqbpt68438w4Pgp5FmJaAasbmC+6LLS8tzep03GYQcMTlK5kS+hKxWTKWJvuWQijtLQlOq0Vi3YbZF38UW3GXLzN/5pzWr2GpyFudvzbysN+87Le7s8rNeHV+X3FzcolKjogMQVGKfT5UU3JgaZJElI6bhmSDgoVdi4OeoFyiTqmffGlhlKV2qperVYu3illeYKsosJe7dZeWo0HAk7ahlVTLxniBWTPGXanMoXXYq6LFMtd6f3GKr9wg18Lc7cd9y9ipRzzvs+o17+jZ1NPc9i5W7Wa8wnLU+9WZji7cgncJ+9gvgA5jLXz2APhDyAEYwk0QhFiP9k/N0gp6/dQowN2QWs+CfjpX4bB6rElc5hI5T8Or7EADKhyIsfb4ZpqZDnNp9cgO4k6nGb0XVCxxE9Y/Khy4gln4VkivRpwKgzOU6LyTWl109VK121mLVsUZ1YqYK1KtCW3LkqTtK9O3ctzZE91Z7Z29RF0nFL0bqtUzjlYTc5Aad9a5atYZt+7U6lDFnv2HCVpQZ9jFim2MtfQ4d1t/le5r+pGa62/Hlxq8Q1SzOmzXdo566kyb72fFQ2S9Goe3P+zTs2ZtNwHQvviDtwDa1vIjtffpv4WcXYZ2uXzN2299Pba/tmbr01SeSjlYsfTh68+ePoNRtXXZ/1fdf5YQfd7w5fc+r1xV5x7p2XXXzXvQfddwsiOJ6A+63XH3BtAdigggPqVmB5uTm1W3v/MTiJgxuC2KF8HwpGHTLpTUhgghpCMR9+4yloEjTPvaKOYkfUyB98YfmIV5FD9EhkZM0whkdNdUm35HSIzBSXRVFmA8dfUhnJZS+1KdPlXTXEAtWVV5qnjJlqzgeFmmayuZWbDSnZopy5rAWlnR8tBKSemvC5op9KjZSloKjEWaahf/JVqKKEIdrEYI4ecwo3kwKiy0RohCkXLwddyuOnoP4jz6iDsmgqDgVxWqQFBQAAOw=='); 
 
}

<body> 
 
    <div class="tile">i</div> 
 
</body>

kaynak

2016-02-11 15:01:14 xpy

Maalesef, "letter-spacing" in bu etkisinin hatalı tarayıcı uygulamalarının sonucu olduğuna inanıyorum ve tarayıcılar arasında güvenilir bir şekilde çalışacağını düşünmüyorum. –

@torazaburo 'text-girinti 'diğer taraftan çalışacaktır. Neden buna inanıyorsun? – xpy

Evet, bence metin girintisi uygun çözümdür. Öneriniz, "letter-spacing" in dizideki son karakterin sağında uygulandığı davranışa dayanmaktadır. Bu, en azından Chrome'da olduğu gibi görünmekle birlikte, aslında ** ile uyumlu değildir. boşluk sadece dizilimdeki ** karakterleri arasında ** uygulanacağını söylüyor, bu da demek oluyor ki, bu sadece bir harf var, hiç de değil.bu yüzden bu "hata" Chrome'da sabitlendiğinde, "çözümünüz" 'letter-spacing' kullanarak çalışmayı durduracaktır.Örneğin, "garip neden" diye sorarsanız, Chrome'daki bir hatadır. –

İç metin ve karakterin iç boşluk/karakter iç içe yerleştirilmeden yatay elemanlı ek elemanlar

cevap

İlgili konular