Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
Groups keyboard shortcuts have been updated
Dismiss
See shortcuts

Hilfe bei Text Zentrierung

6 views
Skip to first unread message

Jan Novak

unread,
Nov 24, 2023, 3:54:55 AM11/24/23
to
Hallo,

ich habe folgenden Code, welcher mir eine bootstrap Progress Bar anzeigt:

<div class="col-4 align-items-center justify-content-center">
<div class="progress progress-bar-vertical" style="width:
100%; position: relative;">
<div id="pgBattery" class="progress-bar
progress-bar-striped "
role="progressbar" aria-valuemin="0"
aria-valuemax="100"
style="height: 10%; background-color: lightgreen;
color: black; " >
<span id="pgInfoBattery" >...</span>
</div>
</div>
</div>



der Text, welcher in "pgInfoBattery" gesetzt wird, steht mittig in der
Höhe, des aktuellen Progresses. das heisst, wenn der Progress z.B. 50%
ist, dann passt das alles da rein, ist er aber nur 10%, wird versucht,
den Text in die 10% Höhe rein zu quetschen.
Ich möchte, dass der Text mittig in der Progress Bar angezeigt wird,
egal wie hoch sie aktuell ist.

Jan

Peter J. Holzer

unread,
Nov 24, 2023, 1:55:34 PM11/24/23
to
Muss <span id="pgInfoBattery"/> denn ein Kind von <div id="pgBattery"/>
sein? Als Sibling hättest Du das Problem nicht (und es erschiene mir
auch logischer).

Aber es geht auch so.

Ich ignoriere mal das Bootstrap-Gedöns, denn erstens mag ich Bootstrap
nicht und zweitens ist es leichter, etwas zu erklären, wenn nicht im
Hintergrund hunderttausend weitere Regeln mitmischen.


<!DOCTYPE html
<html>
<style>
.progress-bar-vertical {
border: 1px solid blue;
height: 200px;
}
#pgInfoBattery {
position: absolute;
top: calc(100px - 0.5em);
}
</style>
<div class="col-4 align-items-center justify-content-center">
<div class="progress progress-bar-vertical" style="width: 100%; position: relative;">
<div id="pgBattery" class="progress-bar progress-bar-striped "
role="progressbar" aria-valuemin="0"
aria-valuemax="100"
style="height: 30%; background-color: lightgreen;
color: black; " >
<span id="pgInfoBattery" >XXX</span>
</div>
</div>
</div>
</html>

Das äußere <div/> hat bereits »position: relative«, etabliert also einen
neuen Layout-Kontext. Alle Positionsangaben von Nachfahren-Elementen
orientieren sich also an dem. Daher kann man #pgInfoBattery mit
»position: absolute« absolut innerhalb des <div/>s positionieren. Hier
berechne ich den für eine Zentrierung notwendigen Abstand zum oberen
Rand (unter der Annahme, dass die Höhe des Elements bekannt ist).

hp

Jan Novak

unread,
Nov 25, 2023, 5:25:09 AM11/25/23
to
Am 24.11.23 um 19:55 schrieb Peter J. Holzer:
>
> Muss <span id="pgInfoBattery"/> denn ein Kind von <div id="pgBattery"/>
> sein? Als Sibling hättest Du das Problem nicht (und es erschiene mir
> auch logischer).

naja, nein, natürlich nicht. Es soll "auf dem Progress Bar" angezeigt
werden, deswegen erschien mir das am sinnvollsten.

> Aber es geht auch so.
>
> Ich ignoriere mal das Bootstrap-Gedöns, denn erstens mag ich Bootstrap
> nicht und zweitens ist es leichter, etwas zu erklären, wenn nicht im
> Hintergrund hunderttausend weitere Regeln mitmischen.
>
>

...

>
> Das äußere <div/> hat bereits »position: relative«, etabliert also einen
> neuen Layout-Kontext. Alle Positionsangaben von Nachfahren-Elementen
> orientieren sich also an dem. Daher kann man #pgInfoBattery mit
> »position: absolute« absolut innerhalb des <div/>s positionieren. Hier
> berechne ich den für eine Zentrierung notwendigen Abstand zum oberen
> Rand (unter der Annahme, dass die Höhe des Elements bekannt ist).


Ich versuche das mal step by step nach zu stellen. Bin da noch blutiger
Anfänger.
Danke vorab für den Hinweis und den Code.

Jan

0 new messages