2016-04-07 21 views
1

"Metin numarası bir" ve "ikinci metin numarası" mükemmel şekilde hizalamam gerekiyor. İkinci metin bir tablonun içinde. Programımın daha sonra ekleyeceğim işlevler ile çalışmasını sağlamak için bu şekilde olması gerekiyor. Dikey-align coz ile kötü bir zaman geçiriyorum, kullandığım tarayıcıya bağlı olarak bana farklı sonuçlar veriyor. Yanlış bir şey yapıyorum ya da her tarayıcının farklı sonuçlar verdiği şeylerdir.Metin dışına mükemmel bir hizalama yaparak ve bir tablo içinde

Hizalama, Microsoft Edge ve IE10 kullanılarak mükemmeldir. Chrome, Mozilla ve Opera'yı tam olarak hizalamıyor.

kod

<!DOCTYPE html> 
<html> 
<head></head> 

<body style="font-size:18pt"><br><br> 

    <span> text number one 

     <table style="margin:0; padding:0; border:0; border-spacing:0; vertical-align:text-bottom; display:inline-table"> 
      <tr> 
       <td style="padding:0"> 
        text number two 
       </td> 
      </tr> 
     </table> 
    </span> 
</body> 
</html> 
+0

pek tablo verileri gibi görünüyor, bu nedenle ilk etapta bir tablo kullanmamalısınız. _ “Programımı daha sonra ekleyeceğim işlevler ile çalışmak için bu şekilde olması gerekiyor” _ - henüz bu işlevleri yazmamışsanız, daha mantıklı bir HTML yapısıyla çalışabilmeniz gerekir. başlamak için semantik olarak. Ve muhtemelen hizalama probleminizi otomatik olarak çözecektir. (Gerçekten bir tablo kullanmak için gerçek bir geçerli nedeniniz varsa, o zaman lütfen daha ayrıntılı olarak elde etmeye çalıştığınız şeyi açıklayın.) – CBroe

+0

CSS ile ilgili bilgilerime göre metinler hizalanmalı ... soru .. gösterilmesi gerekenleri göstererek ... bazı tarayıcıların hizaladığını söylediğim gibi, bazılarının da yapamayacağı ... kodumda yanlış bir şey yapıyorum diye tüm tarayıcılarda bu metinleri nasıl hizalarsınız? .Ve evet masaya ihtiyacım var. Fonksiyonlar zaten yazılmıştır, ancak çok büyük bir programdır ve bu işlevler zaten benim sorumun konusu değildir. – Pablo

+0

Tablo öğelerine uygulanan varsayılan kenar boşlukları/dolgulardan kaynaklanabilir. Araştırmak için tarayıcınızın dev araçlarını kullanın. – CBroe

cevap

1

vertical-align:baseline; deneyin, ama td üzerinde değil, (table etiketinden vertical-align:text-bottom; ve silme) table üzerinde.

İşte codepen var: http://codepen.io/anon/pen/yOpzdK

+0

var, dostum ... bir milyon teşekkürler ... tüm tarayıcılarda mükemmel çalışıyor – Pablo

+0

@Pablo Merhaba Pablo, hoş geldiniz! Eğer çalışırsa, lütfen cevabımı doğru olarak işaretleyin – Johannes

+0

sadece yaptı ... teşekkürler tekrar =) – Pablo