I have a div with some kind of bizarre non-repeating background (Figure 1), and I want to place the text (actually 1 or 2 characters) inside it. The background is asymmetric, so I want to center the text relative to the part of the image (Figure 2). Ideally, I want it to look in Figure 3.
I managed to get the vertical positioning done
div.button { font-size: 40px; line-height: 72px; padding-top: 0; }
However, I cannot get it horizontally the way I want: text-align: center makes it look like Figure 4 (i.e., centered relative to the width of the div ) and padding has no effect.
I know that I can nest another div inside, resize it appropriately and place the text inside. But is there a way to do this without nesting any additional elements? The fact is that I have hundreds of those generated on my page, and all of them have event handlers, so I prefer to transfer the ugly centering of the text than to deal with additional nested elements.
JSFiddle: https://jsfiddle.net/qnxs2ky5/
source share