Forum PHP.pl > [HTML/CSS]Vertical-align tekstu w divie

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML/CSS]Vertical-align tekstu w divie

l0ud

2.03.2008, 20:47:49

Od kilku godzin zajmuję się przerabianiem pewnej strony z układu opartego na tabelkach na warstwy. Co dopiero zaczynam, a już napotykam się na problemy

Konkretnie: nie umiem osiągnąć wyśrodkowania tekstu w pionie, w divie o określonej szerkokości.

Kod 'ramki treści' w przybliżeniu wygląda tak:

[HTML] pobierz, plaintext 
<div class="contents">
	<div class="contents_header"><p class="contents_title">Witamy na naszej stronie!</p></div>
	<div class="contents_row">Treść powitania</div>
</div>
[HTML] pobierz, plaintext

Przy stylu

Kod

DIV.contents {
     border-width: 1px;
     border-style: solid;
     border-color: #B6830A;
     background-color: #FFFDF5;
}

DIV.contents_header {
     background-color: #FFE58B;
     background-image: url('images/contents_h_background.jpg');
     padding: 0px;
     padding-left: 5px;
     padding-right: 5px;
     margin:0px;
     height: 26px;
}

DIV.contents_row {
     border-top-style: solid;
     border-top-color: #F8DA98;
     border-top-width: 1px;
     padding-left: 4px;
     padding-right: 4px;
     padding-top: 4px;
     padding-bottom: 4px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 11px;
     font-weight: normal;
     color: black;
}

P.contents_title {
     padding:0px;
     margin:0px;
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10pt;
     font-weight: normal;
     color: black;
     text-decoration: none;
     vertical-align: middle;
}

Jakby to było istotne, doctype:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
[HTML] pobierz, plaintext

Vertical-align próbowałem przypisać i do diva, i do p.

Efekt:

Ręce opadają... Co robię źle?

Proszę o pomoc i pozdrawiam

Misiur66

2.03.2008, 20:53:40

Coż dziś też to robiłem

To mi pomogło.

Kod

#div_kotener{
    vertical-align:bottom;
    line-height:80px;
    display: inline;
}

Może pomoże, może nie...

l0ud

2.03.2008, 21:00:35

Co uznać w tym przypadku za 'div_kotener'?

Misiur66

2.03.2008, 21:03:33

Tu chodzi o diva rodzica czyli

Kod

<div class="contents_header">
<p class="contents_title">Witamy na naszej stronie!</p>
</div>

element nadrzędny. Tu oklasie contents header.

l0ud

2.03.2008, 21:08:14

Dodanie tych linijek powoduje... cóż...

Przy różnych kombinacjach są inne efekty, ale nie takie jak zamierzony...

Misiur66

2.03.2008, 21:12:36

Przepraszam ale chyba Cię wprowadziłem w błąd

Na moim przykładzie. Tu nie chodzi o kontener. Mam h2 o id "naglowek_c2" a w stylach

Kod

#naglowek_c2{
    vertical-align:[b]middle[/b];
    line-height:80px;
    display: inline;
}

CZyli nie rodzica, tylko element docelowy w twoim wypadku p... Sorka za zamotkę.

BTW: Bottom centruje... ale w dół

middle - środek.
Edit: I znowu błąd ;X line-height nie musi być 80px; chodzi o określenie wysokości linii.

hondek

2.03.2008, 21:24:07

obawiam się, że vertical-align mozna przypisac tylko elementom liniowym i komorkom tabeli

mozesz zrobic z diva komorke tabeli daj w stylach: display: table-cell; a nastepnie vertical-align;

a sorry ty nie dales do diva middle... wiec zamiast <p> uzyj <span>

Misiur66

2.03.2008, 21:27:04

Tak jak mówisz, ale tekst przecież jest elementem liniowym? Z kolei oszukanie CSS przez użycie "tabelki", czasem psuje kompozycje...

hondek

2.03.2008, 21:28:53

<p> nie jest elementem liniowym.
oszukaniem? zmiana typu elementu to chyba nie oszustwo

odsyłam do dokumentacji

l0ud

2.03.2008, 21:33:52

Więc tak, zaważyłem, że przypisanie dodatkowo line-height:26px; do P powoduje rozwiązanie problemu. Ostatecznie w ogóle zrezygnowałem z tego elementu (P) i zrobiłem samą warstwę w ten sposób:

Kod

DIV.contents_header {
    background-color: #FFE58B;
    background-image: url('images/contents_h_background.jpg');
    margin:0px;
    padding: 0px;
    padding-left: 5px;
    padding-right: 5px;
    line-height:26px;
    vertical-align: middle;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10pt;
    font-weight: normal;
    color: black;
    text-decoration: none;
}

Działa... Tylko na ile to poprawne?

hondek

2.03.2008, 21:36:14

połowiczne rozwiazanie, w różnych przeglądarkach może to dać różne efekty, polecałbym Ci jednak użycie <span>

Misiur66

2.03.2008, 21:36:58

Jak działa to się nie martw

Ale na poważnie to chyba dobrze, tylko tam np. jak podajesz margin, to nie piszesz 0px tylko 0 bo jednostka się nie liczy

l0ud

2.03.2008, 21:42:08

Ok, punkciki lecą

Cytat

tylko tam np. jak podajesz margin, to nie piszesz 0px tylko 0 bo jednostka się nie liczy

W każdym kursie widzę jednostkę przy margin

hondek

2.03.2008, 21:43:15

obydwa zapisy są poprawne

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.