如何使我的網站徽標居中？

Question

我在Drupal 8.4中使用Bootstrap 3.6主題

我嘗試將我網站的llogo居中放置，但我做不到。

我測試了：

margin: auto;

和

text-align: center;

沒有成功

這是我的網站https://www.s1biose.com/

這是我在drupal和bootstrap上的page.html.twig文件的內容

{＃/ ** * @file *默認主題實現，以顯示單個頁面。 * * doctype，html，head和body標記不在此模板中。 而是可以在此目錄的html.html.twig模板中找到它們*。 * *可用變量：* *通用工具變量：*-base_path：Drupal安裝的基本URL路徑。 除非您在子目錄中安裝了Drupal，否則通常為* /。 *-is_front：一個標志，指示當前頁面是否為首頁。 *-login_in：一個標志，指示用戶是否已注冊並登錄。*-is_admin：一個標志，指示用戶是否有權訪問*管理頁面。 * *網站標識：*-front_page：首頁的URL。 *鏈接到首頁時，請使用此名稱代替base_path。 這包括語言域或前綴。 * *頁面內容（按在默認page.html.twig中的出現順序）：*-title_prefix：模塊填充的其他輸出，旨在*顯示在模板中顯示的主標題標簽的前面。 *-標題：頁面標題，用於實際內容。 *-title_suffix：由模塊填充的附加輸出，旨在*顯示在模板中出現的主要title標簽之后。 *-消息：狀態和錯誤消息。 應突出顯示。 *-選項卡：鏈接到當前頁面下任何子頁面的選項卡（例如，*顯示節點時查看和編輯選項卡）。 *-節點：完全加載的節點，如果有一個與頁面相關聯的自動加載的節點*並且節點ID是*頁面路徑中的第二個參數（例如，node / 12345和node / 12345 / revisions，但沒有*注釋） / reply / 12345）。 * *地區：*-page.header：標題區域的項目。 *-page.navigation：導航區域的項目。 *-page.navigation_collapsible：導航（可折疊）區域的項目。 *-page.highlighted：高亮顯示的內容區域的項目。 *-page.help：動態幫助文本，主要用於管理頁面。 *-page.content：當前頁面的主要內容。 *-page.sidebar_first：第一個側邊欄的項目。 *-page.sidebar_second：第二個側邊欄的項目。 *-page.footer：頁腳區域的項目。 * * @組模板* * @請參見template_preprocess_page（）* @請參見html.html.twig * /

}

{% set container = theme.settings.fluid_container ? 'container-fluid' : 'container' %}
{# Navbar #}
{% if page.navigation or page.navigation_collapsible %}
  {% block navbar %}
    {%
      set navbar_classes = [
        'navbar',
        theme.settings.navbar_inverse ? 'navbar-inverse' : 'navbar-default',
        theme.settings.navbar_position ? 'navbar-' ~ theme.settings.navbar_position|clean_class : container,
      ]
    %}
    <header{{ navbar_attributes.addClass(navbar_classes) }} id="navbar" role="banner">
      {% if not navbar_attributes.hasClass(container) %}
        <div class="{{ container }}">
      {% endif %}
      <div class="navbar-header">
        {{ page.navigation }}
        {# .btn-navbar is used as the toggle for collapsed navbar content #}
        {% if page.navigation_collapsible %}
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">{{ 'Toggle navigation'|t }}</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        {% endif %}
      </div>

      {# Navigation (collapsible) #}
      {% if page.navigation_collapsible %}
        <div id="navbar-collapse" class="navbar-collapse collapse">
          {{ page.navigation_collapsible }}
        </div>
      {% endif %}
      {% if not navbar_attributes.hasClass(container) %}
        </div>
      {% endif %}
    </header>
  {% endblock %}
{% endif %}

{# Main #}
{% block main %}
  <div role="main" class="main-container {{ container }} js-quickedit-main-content">
    <div class="row">

      {# Header #}
      {% if page.header %}
        {% block header %}
          <div class="col-sm-12" role="heading">
            {{ page.header }}
          </div>
        {% endblock %}
      {% endif %}

      {# Sidebar First #}
      {% if page.sidebar_first %}
        {% block sidebar_first %}
          <aside class="col-sm-3" role="complementary">
            {{ page.sidebar_first }}
          </aside>
        {% endblock %}
      {% endif %}

      {# Content #}
      {%
        set content_classes = [
          page.sidebar_first and page.sidebar_second ? 'col-sm-6',
          page.sidebar_first and page.sidebar_second is empty ? 'col-sm-9',
          page.sidebar_second and page.sidebar_first is empty ? 'col-sm-9',
          page.sidebar_first is empty and page.sidebar_second is empty ? 'col-sm-12'
        ]
      %}
      <section{{ content_attributes.addClass(content_classes) }}>

        {# Highlighted #}
        {% if page.highlighted %}
          {% block highlighted %}
            <div class="highlighted">{{ page.highlighted }}</div>
          {% endblock %}
        {% endif %}

        {# Help #}
        {% if page.help %}
          {% block help %}
            {{ page.help }}
          {% endblock %}
        {% endif %}

        {# Content #}
        {% block content %}
          <a id="main-content"></a>
          {{ page.content }}
        {% endblock %}
      </section>

      {# Sidebar Second #}
      {% if page.sidebar_second %}
        {% block sidebar_second %}
          <aside class="col-sm-3" role="complementary">
            {{ page.sidebar_second }}
          </aside>
        {% endblock %}
      {% endif %}
    </div>
  </div>
{% endblock %}

{% if page.footer %}
  {% block footer %}
    <footer class="footer {{ container }}" role="contentinfo">
      {{ page.footer }}
    </footer>
  {% endblock %}
{% endif %}

Answer 1

我看到您正在嘗試將內聯元素居中。 因此，您需要使用

text-align: center

到內聯元素的父元素。 另外，您還需要刪除賦予內聯元素的所有浮動屬性。

如果它是一個塊元素，則需要給出

margin: x auto; //x can be any number of your choice

到要位於中心的塊元素。

Answer 2

你可以利用的position與屬性一起left其作為計算屬性calc()的：

<div class="region region-navigation"> 50% width -徽標width一半- <button class="navbar-toggle"> width一半（包括邊距和填充），總計107.17485px或約107.175px 。

因此，將徽標居中添加：

style="position: relative; left: calc(50% - 107.175px)"

到<a class="logo navbar-btn pull-left">

或者更好的是，在外部而不是內部或內聯添加它。

另一方面，如果將<button class="navbar-toggle">放在<div class="region region-navigation"> ，則可以使用Flexbox輕松地做到這一點，如下所示：

.region-navigation {
  display: flex;
  justify-content: space-between; /* aligns the three children as far as it can from each other horizontally, which means that one is placed at the far left, another at the far right and the middle one right in the middle/center */
}