FISHY__ 2020-12-08 09:03 采纳率: 0%
浏览 31

我想问一下我这个导航栏无法居中的原因?

已经声明了documenttype ;

也设置了盒子的宽度,但是就是在屏幕左边

如果给body加text-align:center的话,盒子的最左边边框就在屏幕最中间。

求大佬指jiao

 

 <style>
        .new1 {
            font-size: 14px;
            color: lightcyan;
            text-align: center;
        }
        .div1 {
            display: inline-flex;
            text-align: center;
            height: 52px;
            z-index: 999;
            top: 0px;
            position: fixed;
            background-image: linear-gradient(to right,cornflowerblue,green );
            width: 1200px;
            margin-right:18px;
        }
    </style>
</head>
<body>
    @RenderBody()
    @*导航*@
    @*<div class="container">*@
        <div class="row div1">
            <div class="col-lg-2 col-sm-2 co-md-2" style="color: beige; font-size: 18px; margin:7px auto">
                鲜花在线销售系统
            </div>
            <div class="col-lg-1 col-sm-1 col-md-1" style="font-size: 16px; margin:9px auto">
                <p onclick="N2()" class="new1">首页</p>
            </div>
            <div class="col-lg-1 col-sm-1 col-md-1" style="font-size: 15px; margin:9px auto">
                <p onclick="N1()" class="new1">在线购买</p>

            </div>
            <div class="col-lg-1 col-sm-1 col-md-1" style="font-size: 16px; margin:9px auto">
                <p onclick="N3()" class="new1">购物车</p>
            </div>
            <div class="col-lg-3 col-sm-3 col-md-3" style="font-size: 16px; margin:9px auto">
                <p>
                    <input id="Text1" type="text" placeholder="请输入鲜花名称或鲜花用途搜索鲜花~" />&nbsp;
                    <button style="height:29px; width:54px;">搜索</button>
                </p>
            </div>
            <div class="col-lg-1 col-sm-1 col-md-1" style="font-size: 16px; margin:9px auto">
                <p onclick="N4()" class="new1">
                    鲜花申请
                </p>
            </div>
            <div class="col-lg-1 col-sm-1 col-md-1" style="font-size: 16px; margin:9px auto">
                <p onclick="N5()" class="new1">鲜花搭配</p>

            </div>
            <div class="col-lg-2 col-sm-2 col-md-2" style="font-size: 16px; ">


                <img src="../img/13.jpeg" style="border-radius: 50%;overflow: hidden;width: 50px;" onclick="N6()" />

                <a href="../Clients/Create" class="new1">注册</a>

                &nbsp;
                <a href="../Clients/Login" class="new1">登录</a>
            </div>
        </div>
   
    
</body>
</html>

  • 写回答

2条回答 默认 最新

  • 程序媛zcx 2020-12-08 13:22
    关注

    我看类名,你使用的是bootstrap框架吧,我用你的代码引入bootstrap.min.css,是可以居中的,你看下截图是这样吗。

     

    评论

报告相同问题?

悬赏问题

  • ¥20 js怎么实现跨域问题
  • ¥15 C++dll二次开发,C#调用
  • ¥18 c语言期中复习题(求解)
  • ¥15 请教,如何使用C#加载本地摄像头进行逐帧推流
  • ¥15 Python easyocr无法顺利执行,如何解决?
  • ¥15 求一个十多年前的国产符号计算软件(MMP)+用户手册
  • ¥15 为什么会突然npm err!啊
  • ¥15 java服务连接es读取列表数据,服务连接本地es获取数据时的速度很快,但是换成远端的es就会非常慢,这是为什么呢
  • ¥15 vxworks交叉编译gcc报错error: missing binary operator before token "("
  • ¥15 JSzip压缩文件时如何设置解压缩密码