如何在angular.js的顶部居中放置徽标？

Question

我有一个TopPage，我会添加它的截图。

我想做的是我有一个标志，logo.png做我想做的。我想把它放到center of Top上。但是我不能放置它，当我将它添加到页面中时，其他组件会转到我不想要的其他位置。

<div>
  <img class="admin-logo" src="app/img/logo.png" height="45" />
</div>

这是这个页面的代码，

<div class="page-top clearfix" scroll-position="scrolled" max-height="50" ng-class="{'scrolled': scrolled}">
  <a href="#/dashboard" class="al-logo clearfix"><img class="admin-logo" src="app/img/tga.png" height="65" />
  </a>
  <a href class="collapse-menu-link ion-navicon" ba-sidebar-toggle-menu></a>

  <!--   <div class="search"> -->
  <!--     <i class="ion-ios-search-strong" ng-click="startSearch()"></i> -->
  <!--     <input id="searchInput" type="text" placeholder="Search for..."> -->
  <!--   </div> -->
  <img class="admin-logo" src="app/img/logo.png" height="40" style="text-align: center; margin: 0 auto; background-color: red;" />


  <div class="user-profile clearfix" style="background-color: blueviolet;">
    
    <div class="flag-icon">
      <img height="15" width="25" src="app/img/turkey.png" ng-click="changeLanguage('tr')" />
      <img height="15" width="25" src="app/img/us.png" ng-click="changeLanguage('en')" />
    </div>
    <div class="al-user-profile" uib-dropdown>
      <a uib-dropdown-toggle class="profile-toggle-link">
        <span class="user-icon ion-android-person"></span>
      </a>
      <ul class="top-dropdown-menu profile-dropdown" uib-dropdown-menu>
        <li><i class="dropdown-arr"></i></li>
        <li class="username-block">{{pageTop.username}}</li>
        <li style="text-align: center;">v2.250721.2</li>
        <li><a href="#/profile"><i class="fa fa-user"></i>{{ 'DASHBOARD_PAGETOP_PROFILE' | translate }}</a></li>
        <li><a href="#/changePassword"><i class="ion-android-lock"></i>{{'MENU_CHANGEPASSWORD' | translate}}</a></li>
        <li><a href="#/logout" class="signout"><i class="fa fa-power-off"></i>{{ 'DASHBOARD_PAGETOP_LOGOUT' | translate
            }}</a></li>
      </ul>
    </div>
    <!--     <msg-center></msg-center> -->
  </div>
</div>

Answer 1

用于对齐图像中心的最简单的CSS形式

​

li:first-child {
  margin-right: auto;
  
}
li:last-child {
  margin-left: auto;
  background: #ddd;
}
ul {
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
li {
  display: flex;
  margin: 1px;
  padding: 5px;
  background: #aaa;
}
p { text-align: center; margin-top: 0; }
span { background-color: aqua; }

<ul>
  <li>D</li>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
</ul>

​