css - 关于将文本与中心的 css 对齐

Question

我的网站网址

如何将绿框内的文字移到红框内？我设置了我的css，但它没有改变，问题出在哪里？

哪里有问题？以及如何解决？你能帮我解决这个问题吗？

提前致谢！

html code:
          <div class="topmenu">
              <a type="button" class="btn btn-flat text-white">儲存</a>               
              <a type="button" class="btn btn-flat text-white">陳核</a>   
              <a type="button" class="btn btn-flat text-white">退文&lt;/a>   
              <a type="button" class="btn btn-flat text-white">決行</a>   
              <a type="button" class="btn btn-flat text-white">關閉</a>   
          </div>

CSS 代码：.topmenu { text-align:center !important; }

标签： css

Answer 1

在这种情况下text-align: center !important将不起作用，因为您的元素没有覆盖整个导航栏，因此它已经居中。

width: 100%;解决方案

所以你应该最大化div它的可用空间，width: 100%;然后使用text-align: center;，所以输出应该是这样的：

.topmenu {
  text-align: center;
  width: 100%;
}

注意：如果您向导航栏添加额外的元素，它将无法完美运行。

保证金自动解决方案

实现此目的的另一种方法是通过使用margin: 0 auto;. 像这个：

.topmenu {
    margin: 0 auto;
}

注意：由于您在导航元素的左侧有一个空 div <div class="search-form d-none d-lg-inline-block"></div>，这首先可能看起来很奇怪，但是每当您删除该空白div或尝试在其中导入您的搜索输入时，您都会看到结果并且可以正常工作完美。