Logo Image Centered＆amp;标志下面的菜单栏

Question

我正在工作的网站的徽标显示在左侧，但我希望它居中。我该怎么办呢？在下面找到CSS代码。

header .logo{ display: inline-block; padding: 0; vertical-align: middle;}

此外，菜单栏显示在徽标的右侧，但我希望它位于徽标的中心位置。我怎么能这样做？

.nav-right-area{ display: inline-block; vertical-align: middle;}
.navigation{ display: inline-block; vertical-align: middle;}
.navigation > ul{ margin-top: 0px;}
.navbar{ margin-bottom: 0; min-height: inherit;}

如果在下面找到徽标和菜单显示的网站的标题，则显示图片：

该网站的链接是http://midwaycinema7.com/

抬头将不胜感激。

Answer 1

有几种方法可以做到这一点。

1. 使用 Flex 。

   .divHoldingYourLogo{
     display:flex;
     justify-content: center; 
   }
   

2. 使用中心标记。

   <div> 
      <center>
         <img src="logo.jpg" class="YOUR CLASSES">
      </center>
   </div>
   

   但现在没有使用。

   3.使用 margin:auto

   .divHoldingYourLogo{
       display:block;
    }
   
   #logo{
    margin:auto;
   }
   

   1. 使用 Jquery

您也可以通过获取$（窗口）.width（）并将其除以2并将其设置为margin-left或position:absolute property来实现left具有该值。

所以有很多解决方案。您可以选择适合您要求的方法。

Answer 2

更好地提供完整的HTML布局。您可以使用以下代码来使徽标和菜单水平居中：

对于Logo：

header .logo{ display: block; width: 50%; margin: auto auto; padding: 0;}

导航菜单应该用波纹管css包裹在外部元素中：

.navigation-wrap{ display: block; min-width: 50%; margin: auto auto; }

<小时/> 这只是想法，请尝试根据您的代码进行调整。

Answer 3

我能够将您的div放在您最初提供的http://midwaycinema7.com/about/链接菜单上方，这是我的解决方案：

转到CSS，找到

.main-head .col-lg-2 {

}

规则并将display: inline-block;更改为display: block;。另外，添加width: initial;。你的html元素和你的CSS有点令人费解，使用width: initial是我发现重置这个宽度的一种方式，这样你的徽标就是死点。