响应式网站标题部分中的中心徽标

Question

我希望有人能够帮助解决这个问题，我似乎无法弄清楚(我所拥有的知识很少(。我正在尝试将我的徽标放在我网站的标题部分的中心，并且附加的图像是迄今为止我能做的最好的示例。

我已将列调整为下面的html：

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>

CSS 看起来像这样：

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;
}
}
}

任何帮助将不胜感激！

Answer 1

您可以将centered-logodiv中的所有内容居中对齐：

.centered-logo {
text-align: center;
}

示例：https://codepen.io/connormckelvey/pen/PdPqMY

Answer 2

您也可以在"%"中设置边距，这样更方便。

.centered-logo {  
margin-left : 45%;
} 

Answer 3

如果你真的知道标识宽度，只需使用这个古老但有效的技术：

.centered-logo {
margin:0 auto;
width:200px; /* Assuming that your logotype has 200px width */
}

就是这样！

Answer 4

您可以在徽标元素中添加显示：内联块; 和边距：自动;如果它不起作用，那么让我们尝试在下面使用位置属性

例如

.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>