我正在设计AMP页面。我无法使菜单中的文本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>
答案 0 :(得分：1)
您的课程site-name--container具有width: 100%;，导致您的文本跳至下一行。如果您将该部分的宽度设置为auto，则文本完美的烙印将在同一行上。
要保持文本居中并垂直居中，只需添加：
.headerbar {
display: flex;
align-items: center;
}
display flex用于在headerbar中填充内容，而align-items: center则用于使内容在flex框中垂直对齐。
答案 1 :(得分：1)
在您的.headerbar类中添加一些CSS属性-
.headerbar {
display: flex;
align-items: center;
}