Question

我希望有人可以解决我似乎无法解决的问题（因为我所掌握的知识很少）。我正在尝试将徽标放置在网站标题的中心，并且所附图片是迄今为止我能做的最好的example。

我已将列调整为以下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-logo div中的所有内容居中对齐：

.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

您可以在徽标元素中添加 display：inline-block; 和 margin：auto; 。如果不起作用，那么请尝试使用position属性

进行以下操作

例如

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

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

4 个答案: