Jak wyśrodkować tekst w pionie za pomocą css

Próbowałem znaleźć sposób wyśrodkowania tekstu w pionie, ale nie mogę znaleźć zadowalającej odpowiedzi. Najlepszą odpowiedzią, jaką znalazłem do tej pory, jest this. To sprawia, że wygląda tak, że pozwala mi wyśrodkować tekst w pionie, ale jeśli użyję tego i dodaję więcej tekstu, zostanie on rozciągnięty tylko do dołu i nie będzie ponownie wycentrowany, jak to, co dzieje się w poziomie.Jak wyśrodkować tekst w pionie za pomocą css

Uwaga, szukam rozwiązania tylko CSS, więc nie proszę javascript. Uwaga, chcę móc dodawać wiele linii tekstu.

<?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>

Na koniec chcę mieć 3 bloki, każdy z nich wyśrodkowuje tekst na środku. Te teksty są edytowane przez klientów, więc muszą być w stanie rozciągnąć się na wiele linii. Obecnie tekst zaczyna się na górze pudełka i idzie na sam dół, na końcu chcę, aby tekst zaczynał się od punktu, w którym środek tekstu znajduje się pośrodku ramki.

Moje ostateczne rozwiązanie, Uwaga: wyrównanie w pionie nie działa, jeśli masz zmienną: pozostawiono w tym samym dziale div.

<?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>

Źródło

2012-01-03 NomenNescio

można zamieszczać aktualny kod? pierwsze pytanie brzmi: "w czym chcesz umieścić tekst w centrum?" – ptriek

Istnieje wiele metod dostępnych tutaj: http://www.vanseodesign.com/css/vertical-centering/ Jeśli mógłbyś udostępnić kod, którego używasz, być może pomożemy przy konkretnym rozwiązaniu. –

Innym sposobem css jest umieszczenie tekstu w komórce tabeli; w przeciwnym razie będziesz musiał użyć js – mreq

Można ustawić pojemnik do display:table-cell i dodać vertical-align:middle:

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

(Ale IE7 i poniżej nie podoba ...)

Źródło

2012-01-03 15:29:36 ptriek

Poza problemami sprzed IE8 nie działa to również w telefonach komórkowych i urządzeniach przenośnych. (poza ofiarami Safari-Browser). Co więcej, tak naprawdę nie wyśrodkowuje tekstu, to v-centruje kontener potomny, który następnie zawiera tekst ... ale kto chce zacząć tutaj liczyć groszek? ;) Świetny pomysł i tak ... –

Możesz użyć wysokości linii równej wysokości jej kontenera nadrzędnego.

np.

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

Chciałbyś mieć je w zewnętrznym arkuszu CSS.

Jeśli dobrze rozumiem Twoje pytanie.

Źródło

2012-01-03 15:18:52

Chcesz wyjaśnić głosowanie w dół? Jeśli wyjaśniam coś nie tak, nie wahaj się poprawić. –

Nie przesłałem, ale OP wspomniał, że wystąpił problem podczas dodawania kolejnych (czytaj: wielowierszowy) tekst - i to nie zadziała z twoją odpowiedzią ... – ptriek

Dzięki za odpowiedź. –

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

Źródło

2012-01-03 15:20:52 Arrabi

Musisz oznaczyć swój kod HTML jako kod lub nie będzie wyświetlany bezpośrednio w odpowiedzi na żądanie. – scottheckel

Ważna odpowiedź Zgadzam się, ale pojawia się problem: gdy tekst zacznie owijać się poziomo, spowoduje to "przebicie" się w coś brzydkiego z przesadzoną linią wysokości. PO powinien poinformować nas: "ile tekstu" mówimy. ;) –

zwykle używam tego dla przycisków i elementów div z jednym wierszem tekstu. – Arrabi

Cóż, istnieje kilka rozwiązań.

Najłatwiej jest

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

uniwersalnym wkładki, trzeba ustawić a-Box-in-a-Box

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

Problemem jest to, że na "wysokości" na swoim wieloliniowość musi być znana (lub przynajmniej odgadnięta), tak więc faktycznie centruje w pionie.

CO MUSISZ WIEDZIEĆ

Nie ma CSS czysty sposób, aby wiedzieć o wysokości elementu, który mógłby następnie umożliwić nam wyśrodkować go pionowo w „adaptacyjnego” sposób!

Oznacza to, że po zmianie tekstu należy również zmienić CSS, aby upewnić się, że wszystko nadal pasuje.

To może być denerwujące i to jest to, gdzie i dlaczego większość ludzi korzysta z javascript, aby obejść ten błąd związany z CSS "brakującej funkcji". W końcu javascript ułatwia nam wszystkim (przynajmniej w tego rodzaju przypadkach).

WIĘCEJ

Dużo Q & A o to dzieje się wokół sieci i wokół tej stronie.W przypadku, gdy ich brakowało, oto niektóre:

i tam jest o wiele więcej; wszystkie zapewniają indywidualne rozwiązania w indywidualnych przypadkach. Pomogą ci uzyskać nieco większą pewność siebie (jak początkowo stwierdziłeś, że jesteś nowicjuszem w tego rodzaju manipulacjach CSS).

Źródło

2012-01-03 15:22:45

Jak wyśrodkować tekst w pionie za pomocą css

Odpowiedz

Powiązane problemy