Wyrównanie linii bazowej tekstu do początku innego elementu (CSS)

Jestem pewna, że ktoś już to zrobił, ale nie mogę wymyślić wystarczająco dobrego zapytania, aby znaleźć coś na jego temat.Wyrównanie linii bazowej tekstu do początku innego elementu (CSS)

Chciałbym wyrównać linię bazową (nie dolnego elementu tekstu, bazową samego tekstu) do górnej części innego div. Oznacza to również, że chciałbym, aby potomkowie przecinali się z innym div poniżej.

HTML wygląda mniej więcej tak:

<div id="text">text</div> 
<div id="box"></div>

więc chcę .text mieć swoją bazową bezpośrednio na górnej krawędzi .box i chcę się zjazdowe (jak „g”) przecinają się .box . Próbowałem użyć właściwości vertical-align w CSS, ale nie działało. Mam wrażenie, że tego potrzebuję. Jakieś pomysły? Dzięki!

See this image, the gray box would be .box and the text part is .text. Wskazówki te zjazdowe schodząc w pole karne i bazowy mający pełny kontakt z pudełka.

Źródło

2016-01-05 Zach

Chcesz coś podobnego. https://jsfiddle.net/5ah4kc9c/? – ketan

Czy istnieje nie-absolutny sposób to zrobić? Czuję, że jest lepszy sposób na zrobienie tego, który nie opiera się na pikselach po pikselach, dopóki nie wygląda dobrze. – Zach

Podoba Ci się to, stosując line-height?

#box{ 
 
    display:block; 
 
    width:100%; 
 
    height:200px; 
 
    background-color:#ccc; 
 
} 
 
#text{ 
 
    text-align:center; 
 
    font-size:48px; 
 
    line-height:30px; 
 
}

<div id="text">TEXT<em>pgjiq</em></div> 
 
<div id="box"></div>

Trudność polega na tym, że wysokość czcionki nie jest określana przez, powiedzmy, na wysokości litery T - obejmuje ona również wznoszących i zjazdowe.

Nie ma sposobu, aby CSS uświadomił sobie ilość miejsca zajmowanego przez wznoszące się i zstępujące. Przesuwanie go piksel po pikselach jest najlepszym wyborem.

Jeśli martwisz się, że jest to zachowane na różnych ekranach i powiększaniu i pomniejszaniu, powinno być dobrze: przeglądarki są bardzo dobre w zachowywaniu proporcji między wymiarami.

Powiedziawszy, jedynym sposobem uzyskania 100% pewności jest użycie obrazu lub SVG.

Źródło

2016-01-05 05:01:15 RobertAKARobin

Miałem nadzieję na coś, co byłoby trochę bardziej głupi dowód (i mam nadzieję, pracy z czymś w rodzaju FitText.js), ale myślę, że to działa. Mogę po prostu użyć SVG, jak sugerujesz. Dzięki za pomoc! – Zach

Spróbuj tego:

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
     * {font-family: tahoma; font-size: 14px;} 
     #text {margin-bottom: -3px;} 
     #box {background-color: #ddd; width: 100%; height: 100px;} 
    </style> 
</head> 

<body> 
<div id="text">TEXT gjipq</div> 
<div id="box"></div> 
</body> 
</html>

Źródło

2016-01-05 05:02:07

Sposób udało mi się osiągnąć to, co obraz jest wyświetlany jest za pomocą ujemną marżę na dnie pudełka.

*{ 
    margin: 0; 
} 

.text{ 
    background: lightgrey; 
    font-size: 24px; 
} 
.box{ 
    background-color: tomato; 
    width: 100%; 
    height: 40px; 
    margin-top: -12px; 
}

Codepen

Źródło

2016-01-05 05:03:56 Froy

Wyrównanie linii bazowej tekstu do początku innego elementu (CSS)

Odpowiedz

Powiązane problemy