Question

我无法弄清楚如何将我们的IMG集中在我们的导航栏上。道歉这是一个基本问题。

文本对齐不起作用，以下不起作用bc使img超出导航栏列表。任何人对最简单的修复都有任何想法？非常感谢！

display: block;
margin-left: auto;
margin-right: auto }

.logo img {
  width: 34%;
  max-width: 150px;
  max-height: 150px;
  height: 35%;
}
.nav-item--left {
  float: left;
  margin-right: 20px;
  margin-top: 35px;
}
@media (min-width: 768px) {
  .nav-item--left {
    margin-right: 25px;
  }
}
.nav-item--right:last-child {
  margin-right: 0;
}
.nav-item--right {
  display: block;
}
.nav-item--right {
  float: right;
  margin-right: 20px;
  margin-top: 35px;
}
@media (min-width: 768px) {
  .nav-item--right {
    margin-right: 25px;
  }
}
.nav-item--right:last-child {
  margin-right: 0;
}
.nav-item--right {
  display: block;
}

<div id="narrow-display-test" style="display:none"></div>

<header class="header container container--fluid container--darkBackground js-header">


  <div class="container">
    <a href="/" class="logo">
      <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" alt="alt">
    </a>




    <ul class="nav">



      <li class="nav-item">

        <a class="nav-itemText nav-itemText--link">
          <div class="header" ng-controller="LoginCtrl">
            <div class="clearfix">
              <div class="welcome pull-right" ng-show="userLoaded">
                <a class="nav-itemText nav-itemText--link" href="">
                  <span ng-show="currentUser">Your Site</span>
                </a>

              </div>
            </div>
          </div>
        </a>
      </li>





      <li class="nav-item">
        <a class="nav-itemText nav-itemText--link">
          <div class="header" ng-controller="LoginCtrl">
            <div class="clearfix">
              <div class="welcome pull-right" ng-show="userLoaded">
                <a class="nav-itemText nav-itemText--link" href="/">
                  <span ng-show="currentUser">Your Site2 </span>
                </a>

              </div>
            </div>
          </div>
        </a>
      </li>




      <li class="nav-item">
        <a class="nav-itemText nav-itemText--link">
          <div class="header" ng-controller="LoginCtrl">
            <div class="clearfix">
              <div class="welcome pull-right" ng-show="userLoaded">
                <a class="nav-itemText nav-itemText--link" href="/">
                  <span ng-hide="currentUser">
    Your Site 3
    </span>
                </a>

              </div>
            </div>
          </div>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-itemText nav-itemText--link">
          <div class="header" ng-controller="LoginCtrl">
            <div class="clearfix">
              <div class="welcome pull-right" ng-show="userLoaded">
                <a class="nav-itemText nav-itemText--link" href="/">
                  <span ng-hide="currentUser">
    Your Site 4
    </span>
                </a>

              </div>
            </div>
          </div>
        </a>
      </li>

      <li class="nav-item">
        <a class="nav-itemText nav-itemText--link">
          <div class="header" ng-controller="LoginCtrl">
            <div class="clearfix">
              <div class="welcome pull-right" ng-show="userLoaded">
                <a class="nav-itemText nav-itemText--link">

                  <ng-include src="'/partials/login.html'"></ng-include>
                </a>

              </div>
            </div>
          </div>
        </a>
      </li>

    </ul>
  </div>

Answer 1

如果您不想在填充和边距中硬编码以使元素居中，则使用自动边距是常见的解决方案。

通常会出现使用float属性未显示元素的问题。使用float将元素从DOM的正常流中取出。你需要清除元素的浮动，以便在浮动元素之后取正常位置。

这篇文章有助于解释有关花车的更多信息：

https://css-tricks.com/all-about-floats/

同样，这都是假设你的问题来自花车。

Answer 2

你可以使用一个非常简单的技巧。

让您的图片成为导航栏的子项，然后将scala> sc sc scala schema设置为导航栏。

现在在您的图片中插入此代码。

position:relative;

图像将垂直和水平移动到导航栏的正中心。

但如果您只想将其水平居中，请移除img{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }并将top: 50%;更改为transform: translate(-50%, -50%);

像这样：

transform: translateX(-50%);

对于垂直广告，请移除img{ position: absolute; left: 50%; transform: translateX(-50%); }并将left: 50%;更改为transform: translate(-50%, -50%);

像这样：

transform: translateY(-50%);

Answer 3

只需在图片链接上方添加div类row text-center，如下所示：

  <div class="row text-center">
    <a href="/" class="logo">
      <img src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png" alt="alt">
    </a>
  </div>

导航栏上的中心IMG

3 个答案: