nasıl dikey metnini nasıl bulmayı denedim css

ile dikey metni I ortalamak, ama ben tatmin edici bir cevap bulamıyorum. Şu ana kadar bulduğum en iyi cevap this. Bu, metni dikey olarak ortalamamı sağladığından benziyor, ancak bunu kullanırsam ve daha fazla metin eklediğimde, yatay olarak gerçekleştiği gibi, yalnızca tabana kadar genişler ve tekrar merkezlenmezler.nasıl dikey metnini nasıl bulmayı denedim css

Not, ben bir CSS tek çözüm arıyorum hiçbir lütfen javascript. Not, Birden fazla metin satırı ekleyebilmek istiyorum.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<style type="text/css"> 
    div#maindiv { 
     width: 810px; 
     height: 99px; 
     background-color: black; 
     margin: 0px; 
     padding: 0px; 
     color: white; 
     font-family: Sans-serif; 
     text-align: center; 
     display: table; 
    } 
    div#maindiv span { 
     font-size: 1.1em; 
    } 


    div#part1 { 
     width: 270px; 
     height: 99px; 
     background-color: #6DCAF2; 
     float: left; 
     vertical-align: middle; 
     position: relative; 
    } 

    div#horizon1 { 
     background-color: green; 
     height: 1px; 
     left: 0; 
     overflow: visible; 
     position: absolute; 
     text-align: center; 
     top: 50%; 
     visibility: visible; 
     width: 100%; 
    } 

    div#content1 { 
     background-color:green; 
     height:99px; 
     width: 270px; 
     position: absolute; 
     top: -50px; 
    } 

</style> 
<title>XHTML-Strict</title> 
</head> 
<div id="maindiv"> 
<body> 
    <div id="part1"> 
     <div id="horizon1"> 
      <div id="content1"> 
       <div id="bodytext1"> 
        <span> 
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dolor augue, faucibus quis sagittis 
        <span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</body> 
</html>

Sonuçta, her biri ortadaki metni ortalayan 3 bloğa sahip olmak istiyorum. Bu metinler müşteriler tarafından düzenlenir, böylece çoklu satırlara yayılabilmeleri gerekir. Şu anda metin sonunda, ben metnin gövdesinin orta kutusunun ortasına yerleştirilir böylece metin bir noktada başlamak istiyorum, kutunun üst kısmında başlar ve aşağıya doğru gider.

Benim son çözüm, Not: Aynı div sol: Eğer şamandıra varsa vertical-align çalışmaz.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<style type="text/css"> 
    div#maindiv { 
     width: 810px; 
     height: 99px; 
     background-color: black; 
     margin: 0px; 
     padding: 0px; 
     color: white; 
     font-family: Sans-serif; 
    } 
    div#maindiv span { 
     font-size: 1.1em; 
    } 

    div.part { 
     width: 262px; 
     height: 99px; 
     padding: 0px; 
     margin: 0px; 
     padding: 4px; 
     border: 0px; 
     color: white; 
     text-align: center; 
     display: table-cell; 
     vertical-align: middle; 
    } 

    div.bgc1 { 
     background-color: #6DCAF2; 
    } 

    div.bgc2 { 
     background-color: #2A4B9A; 
    } 

    div.bgc3 { 
     background-color: #FF8A00; 
    } 


</style> 
<title>XHTML-Strict</title> 
</head> 
<div id="maindiv"> 
<body> 
    <div style="float: left;"> 
     <div class="part bgc1"> 
      <span> 
       Vegeta! What does the scouter say about his power level?! 
      </span> 
     </div> 
    </div> 
    <div style="float:left;"> 
     <div class="part bgc2"> 
      <span> 
       It's over NINE THOUSAAAAAAAAAND! 
      </span> 
     </div> 
    </div> 
    <div style="float:left;"> 
     <div class="part bgc3"> 
      <span> 
       What NINE THOUSAND? There is no way that can be right! 
      </span> 
     </div> 
    </div> 
</div> 
</body> 
</html>

kaynak

2012-01-03 NomenNescio

Eğer mevcut kod gönderebilir? İlk soru her zaman: 'metnin merkezini ne istiyorsunuz?' – ptriek

Burada kullanılabilecek çeşitli yöntemler bulunmaktadır: http://www.vanseodesign.com/css/vertical-centering/ Kullandığınız kodu paylaşabilirseniz, belki de belirli bir çözümle size yardımcı olabiliriz. –

diğer css yolu, bir tablo hücresinde metne sahip olmaktır; aksi halde js kullanmalısınız – mreq

Sen display:table-cell kapsayıcınızı ayarlayabilir ve vertical-align:middle ekleyebilirsiniz:

http://jsfiddle.net/ptriek/h5j7B/1

(Ama aşağıda IE7 ve bu gibi olmaz ...)

kaynak

2012-01-03 15:29:36 ptriek

IE8 öncesi sorunların yanı sıra, bu cep telefonları ve el bilgisayarlarında da işe yaramıyor. (Safari-Browser kurbanlarının yanı sıra, yani.) Ayrıca, metni gerçekten v-center yapmaz, daha sonra metin içeren çocuk kabını v-merkezler ... ama kim burada bezelye saymaya başlamak ister? ;) Yine de harika bir fikir ... –

Satır yüksekliğini ana kabınınkine eşit kullanabilirsiniz.

örn.

<div style="height:32px;> 
    <p style="line-height:32px;">Text</p> 
</div>

Bunları harici bir css sayfasında olmasını istersiniz.

Sorunuzu doğru anlamak olsam.

kaynak

2012-01-03 15:18:52

Aşağı oyları açıklamak ister misin? Yanlış bir şey açıklıyorsam düzeltmek için tereddüt etme. –

Reddetmedim, ancak OP daha fazla (okuma: çok satırlı) metin eklerken bir sorun oluştuğunu belirtti - ve bu sizin cevabınızla da çalışmaz ... – ptriek

Cevabınız için teşekkürler. –

<div style="height:50px;line-height:50px;"> 
    Text 
</div>

kaynak

2012-01-03 15:20:52 Arrabi

HTML'nizi kod olarak işaretlemeniz ya da SO cevabınızda doğru görüntülenmemesi gerekir. – scottheckel

Geçerli bir yanıt Kabul ediyorum, ancak bir sorun var: metin yatay olarak sarmaya başladığında, bu durum abartılı bir çizgi yüksekliğiyle çirkin bir şeye dönüşecek. OP bize şunu söylemeli: "ne kadar metin" diye konuşuyoruz. ;) –

genellikle bunu bir satır metinle düğmeler ve div'ler için kullanıyorum. – Arrabi

Pek çok çözüm var.

en kolay

olduğunu

çoklu gömlekleri için

#centerme 
{ 
    // will center the text vertically, but looks bad with multiliners 
    line-height:20em; 
}

, bir-box-in-a-box burada

#parentbox 
{ 
    // we need the "parent" to have some kind of height 
    height:20em; 

    // the most important... position children "relative" to the parent 
    position:relative; 
} 

.childbox 
{ 
    position:absolute; 
    left:0; 
    top:50%; 
    margin-top:-5em; // this pulls the child back "up" to the vertical center 
}

sorun konumlandırmak gerekiyor ise "yüksekliği" diye senin Çok-astarlı bilinmelidir (ya da en azından tahmin edilmelidir), bu yüzden dikey olarak ortalar.

SİZE

sonra bize bir "adaptif" şekilde dikey olarak ortalamak izin verecek bir elemanın yüksekliği, hakkında bilmek hiçbir saf CSS yolu yoktur BİLMENİZ GEREKENLER!

Metni değiştirirken, hepsi hala uyduğundan emin olmak için çok CSS değiştirmek gerektiği anlamına gelir.

Bu, can sıkıcı olabilir ve bu nedenle çoğu insan, "eksik bir özelliğin" bu CSS rahatsızlığı etrafında çalışmak için javascript kullanarak geri çekilir. Sonunda, javascript hepimizi kolaylaştırıyor (en azından bu tür durumlarda).

DAHA

bu web etrafında ve bu web sitesinde etrafında oluyor hakkında Q & A'nın bir çok şey var.Eğer onları cevapsız, burada bazıları şunlardır:

ve orada daha fazlası var; Tüm bireysel vakalara bireysel çözümler sunar. Bunlar, biraz daha kendinden emin olmanıza yardımcı olacak (başlangıçta bu tür CSS'nin işe yaradığını belirttiğiniz gibi).

kaynak

2012-01-03 15:22:45

nasıl dikey metnini nasıl bulmayı denedim css

cevap

İlgili konular