时间戳

首页 > 解决方案 > 无法居中标题

html - 无法居中标题

问题描述

我只想将这 4 个锚标签居中li在 thisul中。

有没有办法可以将这四个包装到一个容器中，然后将它们移到左侧CSS？我只希望这 4 个项目显示在该 ul 的中心。

这是我正在谈论的图片

下面是我的总标题HTML。有很多，CSS所以我不知道将人们链接到什么，但我会把我一直在玩的东西放在下面。

    <!-- Header -->
        <header class="header header-fixed header-fixed-on-mobile header-transparent" data-bkg-threshold="100">
            <div class="header-inner">
                <div class="row nav-bar">
                    <div class="column width-12 nav-bar-inner">
                        <div class="logo">
                            <div>


                                <a href="tel:1-530-680-8255"  style="color:grey; display:inline-block">1-530-680- 
                                        8255</a>

                                         <a href="tel:1-530-680-8255"><i class="fas fa-phone" style="display:inline-block"> 
                                          </i>1-530-680-8255</a>



                            </div>
                        </div>
                        <nav class="navigation nav-block secondary-navigation nav-right">
                            <ul>



                                    <li class="aux-navigation hide">
                                        <!-- Aux Navigation -->
                                        <a href="#" class="navigation-show side-nav-show nav-icon">
                                            <span class="icon-menu"></span>
                                        </a>
                                    </li>
                                </ul>
                            </nav>
                        <nav class="navigation nav-block primary-navigation nav-center">
                            <ul>

                                <li class="current"><a href="index.html">Home <i class="fas fa-home"></i></a></li>
                                <li class="current"><a href="index.html">About <i class="fas fa-at"></i></a></li>
                                <li class="current"><a href="index.html">Services <i class="fas fa-wrench"></i> </a></li>
                                <li class="current"><a href="index.html">Contact <i class="fas fa-phone"></i> </a></li>


                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </header>
        <!-- Header End -->
---CSS---

nav ul li  {
display: inline-block;
text-align: center;
width: 100px;
margin: 00px;
padding: 0px;
 }

标签： htmlcss

解决方案

我会通过添加这个css（而不是你显示的那个）来做到这一点：

<style>

  .logo {
    max-width: 300px;
    width: 30%;
    float; left;
    display: block;
  }

  .navigation {
    display: block;
    clear: both;
    max-width: 70%;
    float: right;
    width: 700px;
  }

  .navigation ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .navigation ul li {
    text-align: center;
    width: 100px;
    margin: 0;
    padding: 0;
    display: block;
  }
</style>

<head>因此，您可以在站点的 - 部分添加所有代码，然后它应该可以工作。

推荐阅读