How to apply vertical alignment to child components in an Angular 10 custom component?

Asked
Active3 hr before
Viewed126 times

9 Answers

componentcomponentsalignmentverticalapply
90%

I am creating my own Angular component (something akin to a 'card'), where the custom components will be something like:,Inside the top level component use multiple filtered 'ng-content' tags, like:,The app-my-card component will have 'height' and 'width' attributes. How can I supply styling so that the 'app-my-card-footer' component is always aligned vertically at the bottom of the 'app-my-card' display area?

Inside the top level component use multiple filtered 'ng-content' tags, like:

<div class="my-card-content smart-stack-layout vertical space-between">
   <div style="height: 50px; width: 100%">
      <ng-content select="app-my-card-header"></ng-content>
   </div>
   <div style="height: 100%; width: 100%">
      <ng-content select="app-my-card-body"></ng-content>
   </div>
   <div style="height: auto; width: 100%">
      <ng-content select="app-my-card-footer"></ng-content>
   </div>
</div>
88%

Centering elements in CSS either horizontally or vertically was always tricky and developers have used many methods which sometimes didn't even make sense particularly for beginners.,In this section, we'll see how to center images in CSS both vertically and horizontally with Flexbox.,Next, we'll learn how to center text in CSS horizontally and vertically with Flexbox.

<div class="center">
   <h1>Hello Angular 8!</h1>
</div>
load more v
72%

To vertically align an inline element's box inside its containing line box. For example, it could be used to vertically position an image in a line of text.,The vertical-align property can be used in two contexts:,The vertical-align CSS property sets vertical alignment of an inline, inline-block or table-cell box.

/* Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
   vertical-align: 10em;
   vertical-align: 4px;

   /* <percentage> values */
      vertical-align: 20%;

      /* Global values */
      vertical-align: inherit;
      vertical-align: initial;
      vertical-align: revert;
      vertical-align: unset;
load more v
65%

Introducing a truly professional WordPress theme built to last! We developed Wilmër for all construction & architecture sites.,Fleksibilitet og Kvalitetssikring

 Pretag team - issue, fix, solve, resolve
75%

Measure pass - all components are measured in the safe area portion of the screen.,Layout applies horizontal and vertical alignment only when an element is allocated more size than it needs.,Layout pass - all components are laid out in full screen, but are inset to the safe area boundaries.

<AbsoluteLayout backgroundColor="#3c495e">
   <label text="10,10" left="10" top="10" width="100" height="100" backgroundColor="#43b883" />
   <label text="120,10" left="120" top="10" width="100" height="100" backgroundColor="#43b883" />
   <label text="10,120" left="10" top="120" width="100" height="100" backgroundColor="#43b883" />
   <label text="120,120" left="120" top="120" width="100" height="100" backgroundColor="#43b883" />
</AbsoluteLayout>
load more v
40%

Alignment in Perpendicular Direction(Vertical): center,Alignment in LayoutDirection(Horizontal): end,Alignment in LayoutDirection(Horizontal): start

fxLayout is a directive used to define the layout of the HTML elements. i.e., it decides the flow of children elements within a flexbox container and it should be applied to the parent DOM element i.e., the flexbox container. This directive is case sensitive and also allowed values of fxLayout are row, column, row-reverse, and column-reverse.

<div fxLayout="row">
   <div class="sub-section-1"></div>
   <div class="sub-section-2"></div>
</div>
load more v
22%

An element with no intrinsic size can be “centered” by simply using equal values from the top and bottom. When the element has intrinsic dimensions we might use 0 for top and bottom, then apply margin auto. This will automagically center the element:,This is one of the first, and still a go-to, for many developers. A simple trick, relying on absolute positioning the inner element at 50% from the top of their parent, then translating it up 50% of its height:,Similarly to flexbox, applying margin-auto on a grid-item centers it on both axes.

An element with no intrinsic size can be “centered” by simply using equal values from the top and bottom. When the element has intrinsic dimensions we might use 0 for top and bottom, then apply margin auto. This will automagically center the element:

.container {
   position: relative;
}
.element {
   position: absolute;
   top: 0;bottom: 0;left: 0;right: 0;
   margin: auto;
   height: 20 px; /*requires explicit height*/
}
load more v
60%

 Pretag team - issue, fix, solve, resolve
48%

 Pretag team - issue, fix, solve, resolve

Other "component-components" queries related to "How to apply vertical alignment to child components in an Angular 10 custom component?"