Center the element in the header section

Utilizing angular material and css styling, I have successfully aligned the elements on my header page. However, I am facing a challenge in aligning the three icons (settings, help_outline, and person_outline) to the right side.

<mat-toolbar color="primary">
    <mat-toolbar-row>
        <button mat-icon-button (click)="toggleSideBar()">
            <mat-icon>menu</mat-icon>
        </button>

        <span> APP LOGO </span>

        <div fxFlex fxLayout="row" fxLayoutAlign="flex-end">
            <ul fxLayout="row" fxLayoutGap="20px" style="display: flex; align-items: flex-end;">
                <li>
                    <button mat-icon-button>
                        <mat-icon>settings</mat-icon>
                    </button>
                </li>
                <li>
                    <button mat-icon-button>
                        <mat-icon>help_outline</mat-icon>
                    </button>
                </li>
                <li>
                    <button mat-button [matMenuTriggerFor]="menu">
                        <mat-icon>person_outline</mat-icon>
                    </button>
                    <mat-menu #menu="matMenu">
                        <button mat-menu-item>
                            <mat-icon>exit_to_app</mat-icon>
                            Sign out
                        </button>
                    </mat-menu>

                </li>
            </ul>
        </div>
    </mat-toolbar-row>
</mat-toolbar>

https://i.sstatic.net/R0EAD.png Any suggestions on how to achieve this alignment?

htmlcssflexboxangular-material

Answer №1

mat-toolbar-row{
  height: 50px;
  background-color: blue;
  
  display:flex;
  justify-content:space-between;
}

div {
  display: inline-flex;
  justify-content: flex-end;
}

ul {
  list-style: none;
}

ul li {
  display: inline-block;
}
<mat-toolbar>
  <mat-toolbar-row>
  
    <div id="menu">
      <button>
            <mat-icon>menu</mat-icon>
    </button>
      <span> APP LOGO </span>
    </div>
  
    <div id="icons">
      <ul>
        <li>
          <button mat-icon-button>
            <mat-icon>settings</mat-icon>
          </button>
        </li>
        <li>
          <button mat-icon-button>
            <mat-icon>help_outline</mat-icon>
          </button>
        </li>
        <li>
          <button>
            <mat-icon>person_outline</mat-icon>
          </button>
        </li>
      </ul>
    </div>
    
  </mat-toolbar-row>
</mat-toolbar>

There are certainly various alternative methods to achieve the same outcome.

Answer №2

If you want to arrange the icons in a neat way, there are several simple options available.

  1. Organize the content of your toolbar into clearly defined groups (left, center, right) and set the justify-content property of mat-toolbar to space-between. This will align the groups with automatic spacing between them.

  2. Follow the documentation's recommendation and insert a spacer by creating an empty span between your logo and the group of icons. Set the flex property of the span to 1 1 auto, which will expand the element to fill available space, pushing the icons to the right.

  3. An even easier option is to apply margin-left: auto to the group of icons for a quick alignment solution.

For more examples and clarification, refer to the documentation and inspect the code that demonstrates the use of the span trick: https://material.angular.io/components/toolbar/examples

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Storing parent entity along with child entities containing selected properties using ASP.NET Core MVC

Working on an ASP.NET Core MVC web app, I encountered a problem that can be best explained through this example: Let's consider a scenario where the user needs to save information about a book including its title, number of pages, and one or more aut ...

c#htmlasp.net-mvcasp.net-coreparent-child

CSS-only: Align items in flexbox column with equal width and centered position, without the need for a wrapper

https://i.stack.imgur.com/vAJv2.png This particular challenge involves creating a responsive mobile menu. In this design, the width of all children is determined by the longest child element. The CSS should ensure that the .index class spans the full wi ...

htmlcssflexboxresponsive

Retrieve the data entered in the submit button field

My question concerns a form with two buttons: <form method="post" action=""> <button type="submit" name="age" value="20">Age 20</button> <button type="submit" name="age" value="30">Age 30</button> </form> When ...

javascriptjqueryhtmlajaxserialization

Conceal/reveal div with initial partial visibility

http://jsfiddle.net/7RDBk/1/ At the moment, I am using slideUp and slideDown functions to hide and display a div. My goal is to have 25px of the div showing initially before expanding and going back to 25px when clicked. It seems like a simple task, but I ...

jquerycss

Click on the sidebar to reveal the dropdown menu

I have been working on a project and have successfully created a navbar with a dropdown menu that includes a hover effect. Now, I am attempting to implement a click event to open and close the dropdown's submenu, but unfortunately, it is not working. ...

htmlcss

The input unexpectedly reached its limit, causing a jquery error

Encountering an error that says: Uncaught SyntaxError: Unexpected end of input on line 1. Check out the code below: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html x ...

javascriptjqueryhtml

Is it possible to utilize AJAX to split the text into two separate boxes instead of just one?

My HTML page is currently set up to fetch information from a database table and display it in a single text box. This process involves connecting to a PHP file using an AJAX function for handling the request. Now, I am considering the possibility of displ ...

phphtmlsqlajax

I wonder, who is the one executing the function?

In my application, I have encountered an unusual issue. Within my controller, I have two functions - one to add a tab, and one to remove a tab. Below is the code snippet: $scope.createTab = function(){ $scope.addTab("New Tab",50,0); co ...

javascriptangularjsangular-material

Sending variables to other parts of the application within stateless functional components

My main component is Productos and I also have a child component called EditarProductos. My goal is to pass the producto.id value from Productos to EditarProductos. Here is my Productos component code: import {Button, TableHead, TableRow, TableCell, Tabl ...

javascripthtmlreactjsreact-hooks

Creating user-friendly options for multi-checkbox forms using Django enums

I am facing an issue with my code where it only displays the shorter variable values for 'Plan 1' and 'Plan 2', rather than their longer human-readable forms that I have defined in the model. I am creating checkboxes in an HTML templat ...

pythonhtmldjango

"Angular File Upload Made Easy with Drag-and-Drop Functionality and Cleverly Positioned

Encountering an issue with Angular File upload in conjunction with relatively positioned elements. The drop target is set to 100% width and height, absolutely positioned. While dragging a file over any non-relatively positioned element, the overlay functio ...

javascripthtmlcssangularjsangular-file-upload

Tips for utilizing the value retrieved from foreach within ng-repeat using angularjs

In order to display the field "seconddate" only if it is greater than "firstdate", a function needs to be implemented that will return true or false based on the comparison. The date format is in dd mmm yyyy (e.g., 22 Nov 2017). However, it is unclear how ...

angularjshtml

You can tab through form input boxes on an Adobe Muse website, but they cannot be clicked

Lately, I created a small website using Adobe Muse and incorporated their form widget. However, I haven't altered any of the default settings and now the input boxes are not clickable. The only way to interact with them is by tabbing through. How can ...

jquerycsshtmlmuse

What is the reason behind MySQL rejecting float values?

inquiry in .php $que_cinstructors = " INSERT INTO course_instructors ( usn, i1, i2, i3, i4, i5, i6, i7, i8, i9 ) VALUES ( :usn, :i1, :i2, :i3, :i4, :i5, :i6, :i7, :i8, :i9 )"; $query_params3 = array( ':usn' => ...

phphtmlmysql

Make sure to define the image path in the CSS file of your WordPress project

When working on my WP 4.2 project, I encountered a situation in the CSS file where I had to write: background-image: url('/wp-content/plugins/artistssongs/images/fancybox_sprite.png'); However, I find it inconvenient to display the full path to ...

csswordpress

Basic PHP code for fetching outcomes

Looking to retrieve results from a website by utilizing a for loop to gather and compile them together. (Please note that it involves an ASP request which generates a webpage with specific parameters) I have drafted this code in attempt to achieve the de ...

phpasp.nethtml

Scrolling vertically without the appearance of a scrollbar

I've searched all over the internet for a solution to my problem, but nothing seems to work for me. I want to keep vertical scrolling ability while hiding the scrollbar from view in the y direction all the time. The challenge is to make my #content-m ...

javascriptjqueryhtmlcss

The footer is supposed to be at the bottom, but unfortunately, the clear float isn

Today seems to be a rough one without enough coffee, as I'm struggling to remember how to do this I am trying to achieve the following layout: header content float float footer The content section contains two floating elements. The problem is ...

htmlcss

Sending emails to multiple groups in Opencart can be easily achieved with the

I am interested in customizing Opencart's admin panel to allow for the selection of multiple customer groups when sending emails. However, I am unsure of where and how to make these modifications as I am relatively new to this type of task. https://i ...

phphtmlcssopencart

Encountering difficulties with the mobile display of a Wordpress theme

I am currently working with the megashop theme on WordPress and I have a few queries that need addressing: Is there a way to modify a specific setting exclusively for views smaller than desktop size, without impacting the desktop view? For example, the m ...

phphtmlcsswordpresstwitter-bootstrap-3