立即注册 登录
召隆企博汇论坛 返回首页

linzp的个人空间 http://bbs.clogcn.com/?7 [收藏] [复制] [分享] [RSS]

日志

app导航栏中间使用logo图片,如何实现适应

已有 322 次阅读2019-12-4 15:52

1.原logo图片过大,前端框架使用aui,为了实现衣购思的app导航栏设计图效果去修改aui的源码。
可是结果还是不理想
调整之后,实现图片的水平垂直居中,代码如下

.aui-bar-nav .aui-title {
  height: 15px;
  width: auto;
  display: flex;
  align-items: center;
}
.aui-bar-nav .aui-title img{
  height: 14px;
  align-items: center;
  margin: 0 auto !important;
}

其中,html结构为 
  <!-- 头部导航栏 -->
        <header class="aui-bar aui-bar-nav bar-top" id="aui-header">
            <a class="aui-btn aui-pull-left" tapmode onclick="back()">
                <span class="aui-iconfont aui-icon-left">我的订单</span>
           
            <div class="aui-title">
              <img src="../image/toplogo.jpg" alt="logo">
           
        </header>
效果图如下



路过

雷人

握手

鲜花

鸡蛋

评论 (0 个评论)

facelist

您需要登录后才可以评论 登录 | 立即注册

QQ|Archiver|手机版|小黑屋|召隆企博汇 ( 粤ICP备14061395号 )

GMT+8, 2024-11-24 03:42 , Processed in 0.021297 second(s), 18 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

返回顶部