在菜單中居中顯示文字
[英]Center text within a menu
問題描述
我正在設計一個AMP頁面。 我在菜單Perfect Imprints文本“ Perfect Imprints ”居中且與漢堡包圖標位於同一行時遇到了麻煩。 我似乎只能將其居中，但要放在另一條線上-或-將其在同一條線上左對齊。
我該如何解決這個問題？
理想情況下，如果需要，文本可以是徽標圖像。 但是，如果沒有，那也沒關系。
<!DOCTYPE html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link rel="canonical" href="https://www.perfectimprints.com/custom-promos/20417/Foam-Fingers.html">
<title>Custom Foam Fingers from Perfectimprints.com</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
.text-centered {
text-align: center;
}
.sku {
color: gray;
}
.margin-minus-1 {
margin-top: -1em;
}
.wrapper-link {
text-decoration: none;
color: inherit;
}
.wrapper-link:visited {
text-decoration: none;
color: inherit;
}
.wrapper-link:hover {
text-decoration: none;
color: inherit;
}
.product {
border: 1px solid #DDDDDD;
border-radius: 1%;
margin-bottom: 1em;
}
.hamburger {
font-size: 1.5em;
padding: 0.1em 0 0.2em 0.3em;
display: inline;
}
.headerbar {
background-color: black;
color: white;
}
.site-name--container {
display: inline-block;
text-align: center;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.sidebar {
padding: 2em;
margin: 0;
}
.sidebar > li {
list-style: none;
margin-bottom:10px;
}
.sidebar a {
text-decoration: none;
}
.close-sidebar {
font-size: 1.5em;
padding-left: 1em;
padding-top: 1em;
}
body {
font-family: 'Open Sans', sans-serif;
}
.container {
margin: 1em;
}
</style>
</head>
<body>
<header class="headerbar">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
<div class="site-name--container"><div class="site-name">Perfect Imprints</div></div>
</header>
<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
<div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
<ul class="sidebar">
<li><a href="#">Example 1</a></li>
<li><a href="#">Example 2</a></li>
<li><a href="#">Example 3</a></li>
</ul>
</amp-sidebar>
<div class="container">
<h1 class="h1">Foam Fingers</h1>
<p>
Custom foam fingers and hands are great spirit items to cheer on your sports team.
Choose from our large assortment of various shaped foam hands and foam finger cheering
accessories to show your school spirit. These foam fingers and foam hands are great for
booster club fundraising. Whether you choose a giant foam finger, or a foam claw or
talon, these custom foam cheering fingers will really help generate team spirit. These
imprinted foam hands can be personalized with your custom mascot and make great spirit
items to sell to the crowd.
</p>
<div class="product" style="padding-top: 1em;">
<a class="wrapper-link" href="https://www.perfectimprints.com/custom-promos/20417/Foam-Fingers.html">
<amp-img
alt="Foam Finger Test"
width="1000"
height="1000"
src="https://542c324650a2b8b39f64-e6578149d8b8b981b8afdc5812eb6a36.ssl.cf5.rackcdn.com/thumb/1606-RED&CHARCOAL_INHAND-U.jpg"
layout="responsive"
></amp-img>
<h3 class="product-name text-centered">
12" #1 Foam Deluxe Hand
</h3>
<h4 class="text-centered sku margin-minus-1">#PI-109-1606</h4>
<p class="text-centered price">As low as: <strong>$2.82</strong></p>
</a>
</div>
<div class="product" style="padding-top: 1em;">
<a class="wrapper-link" href="https://www.perfectimprints.com/custom-promos/20417/Foam-Fingers.html">
<amp-img
alt="Foam Finger Test"
width="1000"
height="1000"
src="https://542c324650a2b8b39f64-e6578149d8b8b981b8afdc5812eb6a36.ssl.cf5.rackcdn.com/thumb/1606-RED&CHARCOAL_INHAND-U.jpg"
layout="responsive"
></amp-img>
<h3 class="product-name text-centered">
12" #1 Foam Deluxe Hand
</h3>
<h4 class="text-centered sku margin-minus-1">#PI-109-1606</h4>
<p class="text-centered price">As low as: <strong>$2.82</strong></p>
</a>
</div>
<h2 class="h2">Foam Fingers Are #1</h2>
<p>
A cheap #1 foam finger can make a great for giveaway while the giant foam fingers are great
for selling to the fans. If you want to raise some funds for your booster club or your school,
selling custom printed foam fingers is a great fundraiser. Choose from dozens of different
foam hands or even foam claws to best match your school mascot. If you can't find the shape
you want, we can create a customized shape for you with a minimum order as low as 250 pieces.
If you plan on selling foam fingers for fundraising, be sure to check out our Guide for
<a target="_blank" href="https://www.perfectimprints.com/blog/custom-foam-fingers/amp">Buying Custom Foam Fingers</a>.
</p>
</div>
</body>
</html>
2 個解決方案
解決方案1
1 已采納 2018-08-07 16:52:10
您的班級site-name--container width: 100%; 使您的文本跳到下一行。 如果將該部分的寬度設置為auto ，則文本完美印記將在同一行上。
要使文本居中並垂直居中，只需添加：
.headerbar {
display: flex;
align-items: center;
}
display flex用來將內容和align-items: center填充到headerbar align-items: center用來使內容在flex框中垂直對齊。
解決方案2
1 2018-08-07 16:56:47
在.headerbar類中添加一些CSS屬性-
.headerbar {
display: flex;
align-items: center;
}
全角水平菜單中的垂直和水平居中文本
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.