Menu
I have a div with some fancy non-repeating background (figure 1) and I want to place a text (in fact, 1 or 2 characters) inside it. The background is asymmetrical, so I want to center the text relative to a portion of the image (figure 2). Ideally I want it to look like in figure 3.
I managed to get vertical positioning done by
div.button {
font-size: 40px;
line-height: 72px;
padding-top: 0;
}
However, I can't get it centered horizontally the way I want: text-align: center makes it look like in figure 4 (i.e. centered relative to entire div width) and padding values have no effect.
I know I can nest another div inside, size it appropriately and place my text inside. But is there a way to get this done without nesting any additional elements? The matter is that I have hundreds of those generated on my page and all of them have event handlers, so I'd rather tolerate ugly text centering than have to deal with additional nested elements.
JSFiddle: https://jsfiddle.net/qnxs2ky5/
506
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
While working on web pages, you may want to add a horizontal line to indicate a thematic change between different sections. To create a horizontal line in HTML, you will need to use the HTML hr tag. HR is a block-level element that moves all the elements after it to another line.
To center text in CSS, use the text-align property and define it with the value 'center. ' You can use this technique inside block elements, such as divs. You can also center text in HTML, which is useful if you only want to center individual elements on the page on a case-by-case basis.
For some weird reason you can add text-indent to move the letter to the left;
div.tile {
width: 88px;
height: 123px;
text-align: center;
font-size: 72px;
line-height: 104px;
color: #FF0000;
text-indent:-10px;
background-image: url('data:image/gif;base64,R0lGODlhWAB7AIAAAAAAAP///ywAAAAAWAB7AAAC/4xvoMvtD6N8qNqbpt68438w4Pgp5FmJaAasbmC+6LLS8tzep03GYQcMTlK5kS+hKxWTKWJvuWQijtLQlOq0Vi3YbZF38UW3GXLzN/5pzWr2GpyFudvzbysN+87Le7s8rNeHV+X3FzcolKjogMQVGKfT5UU3JgaZJElI6bhmSDgoVdi4OeoFyiTqmffGlhlKV2qperVYu3illeYKsosJe7dZeWo0HAk7ahlVTLxniBWTPGXanMoXXYq6LFMtd6f3GKr9wg18Lc7cd9y9ipRzzvs+o17+jZ1NPc9i5W7Wa8wnLU+9WZji7cgncJ+9gvgA5jLXz2APhDyAEYwk0QhFiP9k/N0gp6/dQowN2QWs+CfjpX4bB6rElc5hI5T8Or7EADKhyIsfb4ZpqZDnNp9cgO4k6nGb0XVCxxE9Y/Khy4gln4VkivRpwKgzOU6LyTWl109VK121mLVsUZ1YqYK1KtCW3LkqTtK9O3ctzZE91Z7Z29RF0nFL0bqtUzjlYTc5Aad9a5atYZt+7U6lDFnv2HCVpQZ9jFim2MtfQ4d1t/le5r+pGa62/Hlxq8Q1SzOmzXdo566kyb72fFQ2S9Goe3P+zTs2ZtNwHQvviDtwDa1vIjtffpv4WcXYZ2uXzN2299Pba/tmbr01SeSjlYsfTh68+ePoNRtXXZ/1fdf5YQfd7w5fc+r1xV5x7p2XXXzXvQfddwsiOJ6A+63XH3BtAdigggPqVmB5uTm1W3v/MTiJgxuC2KF8HwpGHTLpTUhgghpCMR9+4yloEjTPvaKOYkfUyB98YfmIV5FD9EhkZM0whkdNdUm35HSIzBSXRVFmA8dfUhnJZS+1KdPlXTXEAtWVV5qnjJlqzgeFmmayuZWbDSnZopy5rAWlnR8tBKSemvC5op9KjZSloKjEWaahf/JVqKKEIdrEYI4ecwo3kwKiy0RohCkXLwddyuOnoP4jz6iDsmgqDgVxWqQFBQAAOw==');
}<body>
<div class="tile">i</div>
</body>For your example -10px look perfect, but I suppose that you could use em as well to be more flexible.
143
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
