vertical-align: top on the span element then just positions it at the top of the line box. Has anyone talked about why vertical-align: top works in the scenario? The image in the question is probably taller than the text and thus defines the top edge of the line box. A live demo can be found in this article about vertical-align. On the left, the text is not aligned, on the right it is as shown above. Which might be good enough but can look a little bit off, if the text has ascenders or descenders standing out just at top or bottom: The accepted answer does center the icon around half of the x-height of the text next to it (as defined in the CSS specs). ( )Īpplying the following 3 lines of CSS to an element will vertically centre it within its parent regardless of the height of the parent element: position: relative This solution requires a slightly more modern browser than the other solutions, as it makes use of the transform: translateY property. Variable container height vertical-align:middle If you must support ancient versions of IE This one is easy: set the line-height of the text element to equal that of the container Ībsolutely position an inner div relative to its container Here are some simple techniques for vertical-align: One-line vertical-align:middle
0 Comments
Leave a Reply. |