Center sidenav material 2 in alignment

Question

Center sidenav material 2 in alignment

Using Angular Material 2 presents a challenge for me: While I can align the text in the sidenav to center, I am struggling to align the button correctly. https://i.sstatic.net/vjHw4.png

<md-sidenav-layout fullscreen>
  <md-sidenav #start mode="side">
    <md-sidenav-container align="center">
      <h3>Simple Todos</h3>
      <button md-raised-button (click)="start.close()">Close</button>
      <p>One more text here</p>
    </md-sidenav-container>
    </md-sidenav>
  <md-content>
    <md-toolbar color="primary">

      <button (click)="start.toggle()" md-icon-button [disableRipple]="true"><md-icon>menu</md-icon></button>

      <!-- This fills the remaining space of the current row -->
      <span class="example-fill-remaining-space"></span>
    </md-toolbar>

    <h3>Hello world</h3>

  </md-content>
</md-sidenav-layout>

html css angular angular-material angular-material2

Answer 1

Answer №1

Creating a header with a large div to contain the menu and applying specific styling.

.menu_container {
  width: 100px;
  height: 60px;
  background: gray;
  position: relative;
}
.menu {
  background: blue;
  height: 40px;
  width: 40px;
  border-radius: 20px;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="menu_container">
  <div class="menu centered"></div>
</div>

Answer 2

Creating a header with a large div to contain the menu and applying specific styling.

.menu_container {
  width: 100px;
  height: 60px;
  background: gray;
  position: relative;
}
.menu {
  background: blue;
  height: 40px;
  width: 40px;
  border-radius: 20px;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="menu_container">
  <div class="menu centered"></div>
</div>

Center sidenav material 2 in alignment

Answer №1

Similar questions

Styling <Link> component with styled-components: A step-by-step guide

Integrate a feature in your form that allows users to preview and edit their submission before finalizing

The combination of absolute positioning and percentage-based height measurements allows for

Displaying an array value instead of a new value list in a React component

What is the best way to guide a user to a specific page based on the choice they made after submitting a form?

Executing a component method from a service class in Angular

Using Jquery to select and apply functions to specified div elements

The functionality to close the Angular Material Dialog is not functioning as expected

Emulate the CSS hover effect with jQuery 코드 희미한

Stop any ongoing search requests in Angular 7 using Ng2SmartTable

``The issue concerning the preloading layer on the website``

Matching Figures to their Descriptions

Make the <textarea> occupy the entire available space

Is there a method to identify the quantity of audio channels within a <video> element? (HTML5)

Enhancing the Appearance of Google Line Charts

steps for embedding a video with a URL

Utilizing JavaScript to trigger the :hover pseudo-class and implement event transfers

Use Javascript to set cookies and remember the show state when clicked

How can we use jQuery to animate scrolling down to a specific <div> when clicking on a link in one HTML page and then navigating to another HTML page?

The JavaScript code that added links to the mobile menu on smaller screens is no longer functioning properly