Aligning text both to the left and center
Hi there! I’m working on a site whose primary audience is people living in the Eurozone. Naturally, this makes multi-language support pretty crucial. At the moment I have this language-selection screen, but I was wondering how I could have the language code aligned to the left of the button with the language name aligned in the center? Feel free to assume I have no CSS knowledge
9 Replies
At the moment the layout looks a little something like this:
Also as a secondary question, I am currently using CSS grid to create this grid of language options and then media queries to show a different number of columns at different screen sizes. Is there a more dynamic alternative I can take advantage of? I am not a fan of media queries in the slightest. (Please no JavaScript though)
You can set the position of language code to position:absolute;
something like this
https://codepen.io/tok124/pen/wvQxPzK
and yeah you can use a button, i just used divs in this example. but works just fine with button tag too
That seems to have done the trick, thanks!
Is the dynamic column count thing possible though?
I assume I could use flexbox for that, but IDK how I would ensure all buttons then have the same width
i used grid in my examples.
with grid you can do
grid-template-columns:repeat(5, 1fr); and it creates 5 equal sized columns and it will always be 5 columns, so not responsive.
But in my example i used
grid-template-columns:repeat(auto-fit, minmax(min(200px, 100%), 1fr));
So, by doing this, it will change the amount of columns as you resize the screen. so this is responsive without the use of any media query
But yeah, this can be done with flex too, but i would rather use gridAh I didn’t notice you also did that in the example
I’ll try it out
Yeah great 🙂
Hey that works fantastically
Thanks! This is super helpful
I’m sure you guys have heard this a lot, but as a C guy trying to make a website, all this stuff feels like complete magic haha