| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | --- | 
					
						
							|  |  |  | title: Vertical Align CSS   | 
					
						
							|  |  |  | --- | 
					
						
							|  |  |  | ## Vertical-Align
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | ```vertical-align```is a CSS property used to vertically align an image. | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2018-10-23 21:27:08 -07:00
										 |  |  | For example, you can use ```vertical-align``` like this to align an image: | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | ``` | 
					
						
							|  |  |  | img { | 
					
						
							| 
									
										
										
										
											2018-12-13 05:03:03 +00:00
										 |  |  |   vertical-align: top; | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | } | 
					
						
							|  |  |  | ``` | 
					
						
							|  |  |  | These are the valid values for ```vertical-align```: | 
					
						
							|  |  |  | * ```baseline``` - This is the default value. It aligns the element to the baseline of the parent element | 
					
						
							| 
									
										
										
										
											2018-11-21 07:02:11 +02:00
										 |  |  | * ```length``` - This aligns the baseline of this element at a given length above or below the baseline of the parent. You can use pixels, em, %, etc. | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | * ```sub``` - This aligns the element as if it were the subscript of the parent element | 
					
						
							|  |  |  | * ```super``` - This aligns the element as if it were the superscript of the parent element | 
					
						
							|  |  |  | * ```top``` - This aligns the element so that the top of this element is in align with the top of the tallest element on the line | 
					
						
							|  |  |  | * ```bottom``` - This aligns the element so that the bottom of this element is in align with the bottom of the lowest element on the line | 
					
						
							|  |  |  | * ```middle``` - This aligns the element so that it is in the middle of the parent element | 
					
						
							| 
									
										
										
										
											2019-03-05 05:26:49 +05:30
										 |  |  | * ```text-top``` - This aligns the top of this element so that it is aligned with the top of the parent element's top | 
					
						
							| 
									
										
										
										
											2018-10-12 15:37:13 -04:00
										 |  |  | * ```text-bottom``` - This aligns the bottom of this element so that it is aligned with the bottom of the parent element's text | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | #### More Information:
 | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | * [CSS vertical-align](https://www.w3schools.com/cssref/pr_pos_vertical-align.asp) | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | * [CSS-Tricks vertical-align](https://css-tricks.com/almanac/properties/t/text-align/) |