pasobcoin.blogg.se

The vertical-align property can also be used on table cells or elements with display: table-cell to align the content inside them. The vertical-align can be set using either one of predefined keyword values, or using a length or percentage value.įor a list of possible values and a visual explanation of each value refer to the Values section below. Other values such as text-bottom and text-top, for example, will align an element relative to virtual lines that are directly related to the font being used. If no explicit line-height is specified, the line height is determined by the all of the content inside it. How far the top and bottom edges of the line box are is determined by the line-height property. Some of these virtual lines are relative to the line box itself, and some are relative to the text inside the line box.įor example,the top and bottom values of vertical-align will align the top and bottom edges of an inline-level element with the top and bottom edges of the line box. The different vertical-align values align inline-level elements with respect to virtual lines inside the line box. But what if you want the text to be centered with respect to the image? Or vice versa? The image and text sit next to each other by default, no matter the size of the image its baseline is aligned with the baseline of the text. But what if you want the image to be vertically centered with respect to the text? This is one of the most common use cases for the vertical-align property-it aligns inline content vertically in different positions, depending on the value you pass to it. This means that if you have an image in line with text, the image will always be aligned with the baseline of the text. Without aligning inline elements, they would normally just sit next to each other at the baseline of the line box. and any element with display: inline or display: inline-block. Inline-level elements include images, text, buttons, etc. It is also used to align content inside table cells ( ) and elements with display: table-cell. The vertical-align property is used to align inline-level elements that are positioned next to each other inside a line box.