}

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路径   安装。通常是*＆＃34; /＆＃34;除非你已安装   Drupal在子目录中。 * - is_front：一个标志，指示是否   当前页面是首页。 * - logged_in：指示是否的标志   用户已注册并已登录。* - is_admin：指示的标志   如果用户有权访问*管理页面。 * *   网站标识：* - front_page：首页的网址。用这个   *链接到首页时，而不是base_path。这个   包括语言域或前缀。 * *页面内容（按顺序排列   在默认的page.html.twig中出现：* - title_prefix：   模块填充的附加输出，用于*显示   在模板中显示的主标题标记前面。 * -   title：页面标题，用于实际内容。 * -   title_suffix：模块填充的附加输出，用于   *显示在模板中显示的主标题后面。 * - 消息：状态和错误消息。应突出显示。 * - 标签：链接到标题下方任何子页面的标签   当前页面（例如，显示时的*视图和编辑标签   节点）。 * - node：满载节点，如果有的话   自动加载的节点*与页面和节点相关联   ID是* page的路径中的第二个参数（例如node / 12345和   node / 12345 / revision，但不是* comment / reply / 12345）。 * *   区域：* - page.header：标题区域的项目。 * -   page.navigation：导航区域的项目。 * -   page.navigation_collapsible：导航项目（可折叠）   区域。 * - page.highlighted：突出显示内容的项目   区域。 * - page.help：动态帮助文本，主要用于管理页面。 *    - page.content：当前页面的主要内容。 * - page.sidebar_first：第一个侧边栏的项目。 * -   page.sidebar_second：第二个侧边栏的项目。 * - page.footer：   页脚区域的项目。 * * @ingroup templates * * @see   template_preprocess_page（）* @see 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()：

50%的{{1}} width - 徽标<div class="region region-navigation">的一半 - width <button class="navbar-toggle">的一半（包括边距和填充），总计为107.17485px或大约width。

所以要将徽标加入中心：

107.175px

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

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

另一方面，如果您将<a class="logo navbar-btn pull-left">放在<button class="navbar-toggle">内，您可以使用 Flexbox 轻松完成此操作：

<div class="region region-navigation">

如何将我网站的徽标居中？

}

2 个答案: