在菜单中居中显示文字

Question

I'm designing an AMP page. 我正在设计一个AMP页面。 I'm having trouble getting the text Perfect Imprints in the menu to be centered and on the same line as the hamburger icon. 我在菜单Perfect Imprints文本“ Perfect Imprints ”居中且与汉堡包图标位于同一行时遇到了麻烦。 I can only seem to EITHER get it centered, but on a seperate line -- OR -- get it left-aligned on the same line. 我似乎只能将其居中，但要放在另一条线上-或-将其在同一条线上左对齐。

How can I resolve this issue? 我该如何解决这个问题？

Ideally, the text could be a logo image if desired. 理想情况下，如果需要，文本可以是徽标图像。 But if not, that's okay too. 但是，如果没有，那也没关系。

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

https://codepen.io/anon/pen/KBGzre https://codepen.io/anon/pen/KBGzre

Answer 1

Your class site-name--container has width: 100%; 您的班级site-name--container width: 100%; causing your text to jump to the next line. 使您的文本跳到下一行。 If you set your width to auto for that section your text Perfect Imprints would be on the same line. 如果将该部分的宽度设置为auto ，则文本完美印记将在同一行上。

To keep your text centered and vertically aligned middle just add: 要使文本居中并垂直居中，只需添加：

.headerbar {
  display: flex;
  align-items: center;
}

The display flex is to fill your headerbar with the content and the align-items: center is to keep your content vertically aligned in the flex box. display flex用来将内容和align-items: center填充到headerbar align-items: center用来使内容在flex框中垂直对齐。

Answer 2

Add some CSS properties in your .headerbar class - 在.headerbar类中添加一些CSS属性-

.headerbar {
  display: flex;
  align-items: center;
}

在菜单中居中显示文字

问题描述

2 个解决方案

解决方案1
1 已采纳 2018-08-07 16:52:10

解决方案2
1 2018-08-07 16:56:47

在菜单中居中显示文字

问题描述

2 个解决方案

解决方案1 1 已采纳 2018-08-07 16:52:10

解决方案2 1 2018-08-07 16:56:47

解决方案1
1 已采纳 2018-08-07 16:52:10

解决方案2
1 2018-08-07 16:56:47