center logo in header section of responsive website - html

Question

I was hoping that someone may be able to assist with this issue that I can't seem to figure out (with the little knowledge that I do have). I am trying to get my logo to center in the header section of my website and the attached image is the best I can do so far example.
I have adjusted the columns to the html below:
enter code here
<div class="container">
<div class="sixteen columns">
<div class="three columns nav mobile_hidden">
<ul class="menu left">
{% if section.settings.search_enabled %}
<li class="search">
<a href="/search" title="{{ 'general.search.title' | t }}"
id="search-toggle"><span class="icon-search"></span></a>
</li>
{% endif %}
</ul>
</div>
<div class="seven columns centered-logo logo {% if
section.settings.logo_home != nil %}secondary-logo--true{% endif %}">
<a href="{{ shop.url }}" title="{{ shop.name }}">
{% if section.settings.logo != nil or section.settings.logo_home
!= nil %}
{% if section.settings.logo != nil %}
<img src="{{ section.settings.logo | img_url: '205x', scale: 2
}}" alt="{{ shop.name }}" class="primary_logo" />
{% endif %}
{% if section.settings.logo_home != nil %}
<img src="{{ section.settings.logo_home | img_url: '205x',
scale: 2 }}" alt="{{ shop.name }}" class="{% if section.settings.logo !=
nil %}secondary_logo{% else %}primary_logo{% endif %}" />
{% endif %}
{% else %}
{{ shop.name }}
{% endif %}
</a>
</div>
<div class="five columns menu right">
<div class="nav mobile_hidden">
<ul class="menu right">
{% if settings.show_multiple_currencies %}
<li class="currencies">
{% include 'currencies-switcher' %}
</li>
{% endif %}
{% if shop.customer_accounts_enabled %}
<li class="header-account">
<a href="/account" title="{{ 'layout.customer.my_account' | t
}} {% if customer %}({{ customer.email }}){% endif %}">{% if customer %}{{
'layout.customer.my_account' | t }}{% else %}{{ 'layout.customer.log_in' |
t }}{% endif %}</a>
</li>
{% endif %}
<li class="cart">
<a href="#cart" class="icon-cart cart-button"><svg
class="cart_svg" height="200" width="200" fill="#ddd"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px"
viewBox="0 0 100 100" enable-background="new 0 0 100 100"
xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd"
d="M85.454,32.397H68.242v-8.749c0-11.2-9.38-21.649-20.51-21.649 c-
11.128,0-19.65,10.449-19.65,21.649v8.749h-
17.21L2.265,96.562h94.663L85.454,32.397z M33.819,23.649 c0-8.596,5.371-
14.895,13.913-
14.895c8.541,0,14.773,6.299,14.773,14.895v8.749H33.819V23.649z
M16.609,38.231h11.474v2.926 c-1.55,0.999-2.583,2.75-
2.583,4.747c0,3.107,2.49,5.629,5.561,5.629c3.07,0,5.556-2.522,5.556-
5.629c0-2.09-1.127-3.91-2.797-4.881 v-2.792h28.687v3.909c-0.889,0.998-
1.435,2.315-1.435,3.764c0,3.107,2.488,5.629,5.558,5.629c3.07,0,5.557-
2.522,5.557-5.629 c0-2.539-1.661-4.685-3.943-5.386v-
2.287h11.475l8.605,52.498h-77.45L16.609,38.231z"></path></svg><span>{{
cart.item_count }}</span></a>
</li>
</ul>
</div>
</div>
</div>
and the css looks like this:
enter code here
div.logo img.secondary_logo {
display: none;
}
.feature_image {
.secondary-logo--true {
.primary_logo {
display: none;
}
.secondary_logo {
display: block;
}
#include respond-to('medium'){
img.primary_logo {
display: block;
}
img.secondary_logo {
display: none;
}
}
}
.sticky--active {
.primary_logo {
display: block;
}
.secondary_logo {
display: none;
}
}
}
Any help would be must appreciated!

Answer 1

You can center align everything in your centered-logo div with:
.centered-logo {
text-align: center;
}
Example: https://codepen.io/connormckelvey/pen/PdPqMY

Answer 2

You can also set the margin in '%', Its more convenient.
.centered-logo {
margin-left : 45%;
}

Answer 3

If you really know the logotype width, just use this old but efficient technique:
.centered-logo {
margin:0 auto;
width:200px; /* Assuming that your logotype has 200px width */
}
And that´s it!

Answer 4

You can add display:inline-block; and margin:auto; in logo element.
If it's not worked that so lets try to below with position property
For example
.centered-logo {
position:relative;
}
.logo {
position :absolute;
left:0;
right:0;
width:20px;
height:20px;
background-color:#000;
margin:auto;
display:inline-block;
text-align:center;
}
<div class="centered-logo">
<div class="logo"></div>
</div>