Center text within a menu
Question
I'm designing an AMP page. I'm having trouble getting the text Perfect Imprints in the menu to be centered and on the same line as the hamburger icon. 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>
2 answers
solution1
1 ACCPTED 2018-08-07 16:52:10
Your class site-name--container has 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.
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.
solution2
1 2018-08-07 16:56:47
Add some CSS properties in your .headerbar class -
.headerbar {
display: flex;
align-items: center;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Vertical and horizontally center text within a full width horizontal menu
Center Navigation Menu Text
Center the Text of my Menu
Trying to center a menu within a header?
center menu within the 960 grid
Center text within div
Center the individual Menu Items within a Horizontal Menu
Responsive Menu Vertical Center Text
center align the text in menu item
How to center text in navigation menu
Related Tags