Search
× Search
Menu
  1. Home
  2. News
  3. About Us
  4. Testimonials
  5. Solutions
  6. Contact Us
    1. Features
      1. Short Codes
        1. Pricing
        2. Testimonials
        3. Tabs
        4. Accordions
        5. Boxes
        6. Custom Buttons
        7. Flip boxes
        8. Counters
        9. Circular Menu
        10. Floating Menus
        11. Animated Thumbnails
        12. Animations
        13. Thumbnails
      2. Skin Layout
        1. Containers
      3. Utilities
        1. Borders
        2. Clearfix
        3. Close icon
        4. Colors
        5. Display
        6. Embed
        7. Flex
        8. Float
        9. Image replacement
        10. Position
        11. Screenreaders
        12. Sizing
        13. Spacing
        14. Text
        15. Vertical align
        16. Visibility
      4. Content
        1. Custom Typography Elements
        2. Typography
        3. Tables
        4. Figures
        5. Images
      5. Components
        1. Alerts
        2. Badge
        3. Breadcrumb
        4. Buttons
        5. Button group
        6. Card
        7. Carousel
        8. Collapse
        9. Dropdowns
        10. Forms
        11. Input group
        12. Jumbotron
        13. List group
        14. Modal
        15. Navs
        16. Navbar
        17. Progress
        18. Scrollspy

Vertical alignment

Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

Change the alignment of elements with the vertical-alignment utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.

Choose from .align-baseline, .align-top, .align-middle, .align-bottom, .align-text-bottom, and .align-text-top as needed.

With inline elements:

baseline top middle bottom text-top text-bottom 
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>

With table cells:

baseline top middle bottom text-top text-bottom 
<table style="height: 100px;">
	<tbody>
		<tr>
			<td class="align-baseline">baseline</td>
			<td class="align-top">top</td>
			<td class="align-middle">middle</td>
			<td class="align-bottom">bottom</td>
			<td class="align-text-top">text-top</td>
			<td class="align-text-bottom">text-bottom</td>
		</tr>
	</tbody>
</table>
GET SOCIAL
ABOUT US

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Terms Of UsePrivacy StatementCopyright 2024 by DNN Corp
Back To Top