diff --git a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx
index a5003a378a2..99e7db4394a 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarContent.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarContent.tsx
@@ -17,14 +17,8 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Alignment at various breakpoints. */
-  alignment?: {
-    default?: 'alignRight' | 'alignLeft';
-    md?: 'alignRight' | 'alignLeft';
-    lg?: 'alignRight' | 'alignLeft';
-    xl?: 'alignRight' | 'alignLeft';
-    '2xl'?: 'alignRight' | 'alignLeft';
-  };
+  /** Vertical alignment of children */
+  alignItems?: 'center' | 'default';
   /** Content to be rendered as children of the content row */
   children?: React.ReactNode;
   /** Flag indicating if a data toolbar toggle group's expandable content is expanded */
@@ -57,7 +51,7 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
       isExpanded,
       toolbarId,
       visibility,
-      alignment,
+      alignItems,
       clearAllFilters,
       showClearFiltersButton,
       clearFiltersButtonText,
@@ -71,7 +65,6 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
             className={css(
               styles.toolbarContent,
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
-              formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
               className
             )}
             {...props}
@@ -93,7 +86,14 @@ export class ToolbarContent extends React.Component<ToolbarContentProps> {
                       chipContainerRef: this.chipContainerRef
                     }}
                   >
-                    <div className={css(styles.toolbarContentSection)}>{children}</div>
+                    <div
+                      className={css(
+                        styles.toolbarContentSection,
+                        alignItems === 'center' && styles.modifiers.alignItemsCenter
+                      )}
+                    >
+                      {children}
+                    </div>
                     <ToolbarExpandableContent
                       id={expandableContentId}
                       isExpanded={isExpanded}
diff --git a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
index 7d4c7e7ccd5..1c5bbcce61d 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarGroup.tsx
@@ -23,14 +23,18 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Alignment at various breakpoints. */
-  alignment?: {
+  /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
+  align?: {
     default?: 'alignRight' | 'alignLeft';
     md?: 'alignRight' | 'alignLeft';
     lg?: 'alignRight' | 'alignLeft';
     xl?: 'alignRight' | 'alignLeft';
     '2xl'?: 'alignRight' | 'alignLeft';
   };
+  /** Vertical alignment of children */
+  alignItems?: 'center' | 'baseline' | 'default';
+  /** Vertical alignment */
+  alignSelf?: 'center' | 'baseline' | 'default';
   /** Spacers at various breakpoints. */
   spacer?: {
     default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
@@ -55,7 +59,19 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
 
 class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
   render() {
-    const { visibility, alignment, spacer, spaceItems, className, variant, children, innerRef, ...props } = this.props;
+    const {
+      visibility,
+      align,
+      alignItems,
+      alignSelf,
+      spacer,
+      spaceItems,
+      className,
+      variant,
+      children,
+      innerRef,
+      ...props
+    } = this.props;
 
     return (
       <PageContext.Consumer>
@@ -65,9 +81,13 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
               styles.toolbarGroup,
               variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup' | 'buttonGroup'],
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
-              formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(align, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
               formatBreakpointMods(spaceItems, styles, '', getBreakpoint(width)),
+              alignItems === 'center' && styles.modifiers.alignItemsCenter,
+              alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
+              alignSelf === 'center' && styles.modifiers.alignSelfCenter,
+              alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline,
               className
             )}
             {...props}
diff --git a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
index d74c3d561d0..dfa21ca2596 100644
--- a/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
+++ b/packages/react-core/src/components/Toolbar/ToolbarItem.tsx
@@ -39,14 +39,16 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Alignment at various breakpoints. */
-  alignment?: {
+  /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
+  align?: {
     default?: 'alignRight' | 'alignLeft';
     md?: 'alignRight' | 'alignLeft';
     lg?: 'alignRight' | 'alignLeft';
     xl?: 'alignRight' | 'alignLeft';
     '2xl'?: 'alignRight' | 'alignLeft';
   };
+  /** Vertical alignment */
+  alignSelf?: 'center' | 'baseline' | 'default';
   /** Spacers at various breakpoints. */
   spacer?: {
     default?: 'spacerNone' | 'spacerSm' | 'spacerMd' | 'spacerLg';
@@ -76,9 +78,10 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   className,
   variant,
   visibility,
-  alignment,
   spacer,
   widths,
+  align,
+  alignSelf,
   id,
   children,
   isAllExpanded,
@@ -114,8 +117,10 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
               ],
             isAllExpanded && styles.modifiers.expanded,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
-            formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(align, styles, '', getBreakpoint(width)),
             formatBreakpointMods(spacer, styles, '', getBreakpoint(width)),
+            alignSelf === 'center' && styles.modifiers.alignSelfCenter,
+            alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline,
             className
           )}
           {...(variant === 'label' && { 'aria-hidden': true })}
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
index 26d902b8e7f..8bd16ab6abd 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
@@ -228,7 +228,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
               dropdownItems={splitButtonDropdownItems}
             />
           </ToolbarItem>
-          <ToolbarItem variant="pagination" alignment={{ default: 'alignRight' }}>
+          <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
             <Pagination
               itemCount={37}
               perPage={perPage}
diff --git a/packages/react-core/src/demos/Card/Card.md b/packages/react-core/src/demos/Card/Card.md
index 84996a76734..3193bae9ff9 100644
--- a/packages/react-core/src/demos/Card/Card.md
+++ b/packages/react-core/src/demos/Card/Card.md
@@ -532,7 +532,7 @@ class CardViewBasic extends React.Component {
             </OverflowMenuControl>
           </OverflowMenu>
         </ToolbarItem>
-        <ToolbarItem variant="pagination" alignment={{ default: 'alignRight' }}>
+        <ToolbarItem variant="pagination" align={{ default: 'alignRight' }}>
           {this.renderPagination()}
         </ToolbarItem>
       </React.Fragment>
diff --git a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
index 8e1635e6072..7814540bf3f 100644
--- a/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
+++ b/packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
@@ -238,7 +238,7 @@ class BasicNotificationDrawer extends React.Component {
     const headerToolbar = (
       <Toolbar>
         <ToolbarContent>
-          <ToolbarGroup spaceItems={{ default: 'spacerNone' }} alignment={{ default: 'alignRight' }}>
+          <ToolbarGroup spaceItems={{ default: 'spacerNone' }} align={{ default: 'alignRight' }}>
             <ToolbarGroup variant="icon-button-group">
               <ToolbarItem visibility={{ default: 'visible' }} isSelected={isDrawerExpanded}>
                 <NotificationBadge
@@ -805,7 +805,7 @@ class GroupedNotificationDrawer extends React.Component {
     const headerToolbar = (
       <Toolbar>
         <ToolbarContent>
-          <ToolbarGroup spaceItems={{ default: 'spacerNone' }} alignment={{ default: 'alignRight' }}>
+          <ToolbarGroup spaceItems={{ default: 'spacerNone' }} align={{ default: 'alignRight' }}>
             <ToolbarGroup variant="icon-button-group">
               <ToolbarItem visibility={{ default: 'visible' }} isSelected={isDrawerExpanded}>
                 <NotificationBadge
diff --git a/packages/react-core/src/demos/Toolbar.md b/packages/react-core/src/demos/Toolbar.md
index 1618ec09223..4ecceca8b96 100644
--- a/packages/react-core/src/demos/Toolbar.md
+++ b/packages/react-core/src/demos/Toolbar.md
@@ -525,8 +525,8 @@ class ConsoleLogViewerToolbar extends React.Component {
 
     const items = (
       <React.Fragment>
-        <ToolbarGroup alignment={{ default: 'alignLeft' }}>{leftAlignedItems}</ToolbarGroup>
-        <ToolbarGroup alignment={{ default: 'alignRight' }}>{rightAlignedItems}</ToolbarGroup>
+        <ToolbarGroup align={{ default: 'alignLeft' }}>{leftAlignedItems}</ToolbarGroup>
+        <ToolbarGroup align={{ default: 'alignRight' }}>{rightAlignedItems}</ToolbarGroup>
       </React.Fragment>
     );
 
diff --git a/packages/react-core/src/demos/examples/DashboardHeader.js b/packages/react-core/src/demos/examples/DashboardHeader.js
index d6dcefd53be..0961ea0547a 100644
--- a/packages/react-core/src/demos/examples/DashboardHeader.js
+++ b/packages/react-core/src/demos/examples/DashboardHeader.js
@@ -145,7 +145,7 @@ export default class DashboardHeader extends React.Component {
         <ToolbarContent>
           <ToolbarGroup
             variant="icon-button-group"
-            alignment={{ default: 'alignRight' }}
+            align={{ default: 'alignRight' }}
             spacer={{ default: 'spacerNone', md: 'spacerMd' }}
           >
             {notificationBadge ? (
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index 8163a7e4578..e32601732b3 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -157,7 +157,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
index 085dec5d174..e293f9719ff 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -157,7 +157,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
index 9c8e053c927..19f602ad443 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
@@ -157,7 +157,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
index 3c5c34240aa..d1daf4d3fa1 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -148,7 +148,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
       <ToolbarContent>
         <ToolbarGroup
           variant="icon-button-group"
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spacer={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           <ToolbarItem>
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
index 79bacf05e87..02282f20ff2 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
@@ -155,7 +155,7 @@ export class MastheadDemo extends React.Component {
                   ))}
                 </ContextSelector>
               </ToolbarItem>
-              <ToolbarGroup alignment={{ default: 'alignRight' }}>
+              <ToolbarGroup align={{ default: 'alignRight' }}>
                 <ToolbarItem visibility={{ default: 'hidden', lg: 'visible' }}>
                   <Dropdown
                     onSelect={this.onDropdownSelect}