title: CSS media query for positioning logo at centre for mobile devices
body: <p>I think this is fairly simple for CSS experts but I am a newbie to CSS and media queries. Please help me.</p>
  
  <p>I have mat-toolbar with menu button and app logo onto into, following HTML code describes,</p>
  
  <pre><code>&lt;div class="toolbar"&gt;
      &lt;mat-toolbar style="background-color: black;"&gt;
      &lt;div class="logo"&gt;
            &lt;img src="/assets/images/Cycle.ico"/&gt;
            &lt;span style="color: orange;"&gt;CYC &lt;span style="color: white;"&gt;Admin&lt;/span&gt;&lt;/span&gt;
      &lt;/div&gt;
      &lt;button class="menuButton" mat-icon-button (click)="sidenav.toggle()"&gt;&lt;mat-icon&gt;menu&lt;/mat-icon&gt;&lt;/button&gt;
      &lt;/mat-toolbar&gt;
  </code></pre>
  
  <p>When I viewed through mobile devices, the logo should display at centre of toolbar and menu button to the left.</p>
  
  <p>How can I make it possible through CSS media query?
  Please help me.</p>
  
  <p>Here is the Stackblitz I have tried :  <a href="https://stackblitz.com/edit/angular-zrdqir" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-zrdqir</a></p>