Vertically align characters in different elements
i have 4 buttons each with 1 unicode character right next to eachother. The problem is that i want to make them all the same size and have the same alignment.
So basically i want to have all the characters have the same height and position.
is there anyway to archive this without having to manually fiddle around with font-sizes, positions, margins etc.
Codepen: https://codepen.io/Aradiv/pen/ZEdVLBp
14 Replies
Your unicode characters for "+" and "x" don't seem to be working for me. I have tested on both Chrome and Firefox on a Mac.
However, if I replace them with these entities:
They do display and, at first glance, do appear to align.
ah, sorry, in my quick test I forgot that I also added
font-family: monospace; which helped so I was cheating...you can also set the symbols to be 1lh tall
an easier method is to just use svgs
i went with svgs for the icons
and it worked?
yeah i just created 4 svgs that aligned and used them
can you show the final result?
can do so later
im curious to see it
display: grid; place-items: center; 🙂
it does a lot of the heavy-lifting but doesn't always work without setting the line-height
for this case, set line-height to 1.
yup, but then you also need to make it unselectable and uninteractible
otherwise, you are selecting the number or only touching on that element
yes, that is true, but you can use pointer-events: none; or you can create data attribute for handle content using pseudo element unselectable content https://codepen.io/luko248/pen/jOgExrm?editors=1100
i know
but in the end, you will have something that somewhat resembles what i've suggested
except the positioning is done with grid and not position
the grid has the advantage of both being the same height, if it is at 1fr for all rows
the position has the advantage of being more easily controllable but can overflow (which is bad)