Richten Sie die Grundlinie des Textes an der Spitze eines anderen Elements (CSS) aus

Ich bin mir sicher, dass jemand das schon einmal gemacht hat, aber ich kann mir keine gut passende Suchanfrage ausdenken, um etwas darüber zu finden.Richten Sie die Grundlinie des Textes an der Spitze eines anderen Elements (CSS) aus

Ich möchte die Grundlinie (nicht die Unterseite des Textelements, die Grundlinie des Textes selbst) an der Spitze eines anderen div ausrichten. Das bedeutet auch, dass ich möchte, dass die Unterlängen sich mit dem anderen darunter liegenden Teil schneiden.

HTML sieht ungefähr so aus:

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

Deshalb möchte ich .text seine Basislinie haben, direkt oben auf der oberen Kante des .box, und ich möchte die Unterlängen (wie „g“) schneiden in .box . Ich habe versucht, die vertical-align Eigenschaft in CSS zu verwenden, aber es hat nicht funktioniert. Ich habe das Gefühl, dass ich das aber brauche. Irgendwelche Ideen? Vielen Dank!

See this image, the gray box would be .box and the text part is .text. Beachten Sie, dass die Unterlängen in die Box und die Basislinie mit vollem Kontakt mit der Box gehen.

Quelle

2016-01-05 Zach

Sie wollen etwas ähnliches. https://jsfiddle.net/5ah4kc9c/? – ketan

Gibt es einen nicht-absoluten Weg, es zu tun? Ich habe das Gefühl, dass es einen besseren Weg gibt, es zu tun, der nicht darauf angewiesen ist, die Dinge pixelweise zu stupsen, bis es richtig aussieht. – Zach

So verwenden Sie 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>

Die Schwierigkeit besteht darin, dass die Höhe der Schriftart nicht von, sagen wir, die Höhe des Großbuchstabe T bestimmt wird - es enthält auch die Ober- und Unterlängen.

Es gibt keine Möglichkeit, CSS den Platzbedarf von Ober- und Unterlängen bewusst zu machen. Es pixelgenau zu pushen ist die beste Wahl.

Wenn Sie sich Sorgen darüber machen, dass dies auf verschiedenen Bildschirmen und beim Zoomen erhalten bleibt, sollte es in Ordnung sein: Browser sind sehr gut darin, die Proportionen zwischen den Dimensionen beizubehalten.

Das heißt, die einzige Möglichkeit, 100% sicher zu sein, ist ein Bild oder ein SVG zu verwenden.

Quelle

2016-01-05 05:01:15 RobertAKARobin

Ich habe auf etwas gehofft, das etwas narrensicherer wäre (und hoffentlich mit etwas wie FitText.js arbeiten würde), aber ich schätze, das funktioniert. Ich könnte einfach ein SVG verwenden, wie Sie es vorgeschlagen haben. Danke für Ihre Hilfe! – Zach

Versuchen Sie folgendes:

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

Quelle

2016-01-05 05:02:07

Die Art und Weise ich in der Lage war zu erreichen, was Ihr Bild auf dem unteren Feld unter Verwendung einer negativen Marge anzeigt.

*{ 
    margin: 0; 
} 

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

Codepen

Quelle

2016-01-05 05:03:56 Froy

Richten Sie die Grundlinie des Textes an der Spitze eines anderen Elements (CSS) aus

Antwort

Verwandte Themen