how to center text with the calc() function in css

Question

I'm making a fancy page that need to have some text centered, i can't use the text-align: center; thing because i have a position: absolute;. So now i need the be able to center the text horizontaly with the calc() function instead (also because i want to do some other fancy stuff with it).

This is what i tried and didn't work: CSS:


#center {
    position: absolute;
    margin-left:calc(100vw /2 - attr(length) /2);
}

HTML:

[...]

<div id="center">test</div>

[...]

As shown above I've tried using attr(), but I don't know which value to put inside to obtain what i want (and infact firefox refuse to make it work)

In the answer please consider that text will change on the fly. The text shoud be always centered.

hope you understood and can help

That'll center the whole element, not just the text. Sounds like an XY problem? — BenM, Jul 15 '19 at 15:24
you are simply complicating an easy task .. duplicate of : https://stackoverflow.com/q/1776915/8620333 — Temani Afif, Jul 15 '19 at 15:27
@TemaniAfif it's not complety cenering the text, because if the text is very long you will notice that the text will no longer lloks centered — Enry Frafranci, Jul 15 '19 at 15:31
well i was thinking you refered to the first one . . . still showrin did it — Enry Frafranci, Jul 15 '19 at 15:35

score 1 · Accepted Answer · answered Jul 15 '19 at 15:30

1

you can try this. Hope it will be helpful to you.

#center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

<div id="center">test</div>

answered Jul 15 '19 at 15:30

Showrin Barua

1,737
1
11
22

thank you, what i wanted – Enry Frafranci Jul 15 '19 at 15:35
Welcome @EnryFrafranci . By the way if this works for you please mark the answer as accepted. :) – Showrin Barua Jul 15 '19 at 15:37

how to center text with the calc() function in css

1 Answers1