html - 响应式网站标题部分的中心徽标
问题描述
我希望有人能够帮助解决这个我似乎无法弄清楚的问题(我所拥有的知识很少)。我正在尝试让我的徽标位于我网站的标题部分的中心,并且所附图像是迄今为止我能做的最好的例子。
我已将列调整为以下 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;
}
}
}
任何帮助将不胜感激!
解决方案
您可以将centered-logo
div 中的所有内容居中对齐:
.centered-logo {
text-align: center;
}
推荐阅读
- kernel - 如何在 Qemu 中为 PPC 启动 U-boot 网络?
- c# - 如何将 Linq 列表导出到 Excel 范围
- python - 如何在测试中修补用`flask - route`装饰的方法?
- c# - How to create installation logs at a particular location using Wix toolset?
- java - Lucene 无法添加具有相同 FieldType 的多个字段
- java - Java 内存泄漏:为什么不收集无法访问的对象?
- javascript - 使用 django/javascript 时如何避免这个 Unexpected token 错误?
- sql-server-2008-r2 - 如何在 SQLCLR 2 中启用 TLS 1.2 支持?
- docker - Nginx 容器 502 Bad Gateway
- php - 如何在另一个数组中分配一个数组