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

Question

I'm using the Bootstrap 3.6 theme with Drupal 8.4

I try to center the llogo of my site but I can not do it.

I tested with:

margin: auto;

and

text-align: center;

without success

Here is my site https://www.s1biose.com/

Here is the content of my page.html.twig file on drupal and bootstrap

{# /** * @file * Default theme implementation to display a single page. * * The doctype, html, head and body tags are not in this template. Instead they * can be found in the html.html.twig template in this directory. * * Available variables: * * General utility variables: * - base_path: The base URL path of the Drupal installation. Will usually be * "/" unless you have installed Drupal in a sub-directory. * - is_front: A flag indicating if the current page is the front page. * - logged_in: A flag indicating if the user is registered and signed in. * - is_admin: A flag indicating if the user has permission to access * administration pages. * * Site identity: * - front_page: The URL of the front page. Use this instead of base_path when * linking to the front page. This includes the language domain or prefix. * * Page content (in order of occurrence in the default page.html.twig): * - title_prefix: Additional output populated by modules, intended to be * displayed in front of the main title tag that appears in the template. * - title: The page title, for use in the actual content. * - title_suffix: Additional output populated by modules, intended to be * displayed after the main title tag that appears in the template. * - messages: Status and error messages. Should be displayed prominently. * - tabs: Tabs linking to any sub-pages beneath the current page (eg, the * view and edit tabs when displaying a node). * - node: Fully loaded node, if there is an automatically-loaded node * associated with the page and the node ID is the second argument in the * page's path (eg node/12345 and node/12345/revisions, but not * comment/reply/12345). * * Regions: * - page.header: Items for the header region. * - page.navigation: Items for the navigation region. * - page.navigation_collapsible: Items for the navigation (collapsible) region. * - page.highlighted: Items for the highlighted content region. * - page.help: Dynamic help text, mostly for admin pages. * - page.content: The main content of the current page. * - page.sidebar_first: Items for the first sidebar. * - page.sidebar_second: Items for the second sidebar. * - page.footer: Items for the footer region. * * @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

I see you are trying to center an inline element. Hence you need to use

text-align: center

to the parent element of the inline element. Also you need to remove any floating properties given to the inline element.

If it is a block element you need to give

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

to the block element that you want to be in the center.

Answer 2

You can take advantage of the position property together with the left property which is calculated as the calc() of:

50% width of the <div class="region region-navigation"> - half of the logo width - half of the <button class="navbar-toggle"> width (including margins and padding), which adds up to 107.17485px or roughly 107.175px .

So to center the logo add:

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

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

Or better, add it externally and not internally or inline.

On the other hand, if you place the <button class="navbar-toggle"> inside the <div class="region region-navigation"> you can do that easily with the Flexbox like this:

.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 */
}