Reply To: Horizontally centering an absolute element

[Shikkediel]

I’ll mess around with Codepen, hoping my brain finds the connection.

There was another horizontal alignment issue on that page, be it not one that had to do with absolute positioning – when the page would get so small that the text inside the <a> navigation links becomes larger then the assigned space (extra tricky with a transform involved). The ‘overflow’ of text is then creating an offset, making it not centered.

Sometimes with CSS you get something to work but you’re not sure how you got there. Wrapped the text in a span and gave it this style :

.option span {
display: inline-block; /* needed for scaling */
position: relative;
left: 50%;
margin-left: -100%;
-webkit-transform: scale(0.7, 1); /* three lines above most relevant */
transform: scale(0.7, 1)
}

Works like a charm now but took a lot of trial (and mostly error).

B-)

Anyone interested to see the difference, a very small screen (with relatively large height to fit the dev tools) will show the difference when these lines are not applied. Not really another question but maybe interesting for posterity.

Edit – forgot to mention it’s only the ‘Graphics’ text that is too long…