I've got an SVG that I want to place next to some inline text as part of a navbar like so:
The problem now is that it's not inline with the SVG. It looks like this, overflowing out from the navbar:
Here's a snippet of my HTML (it's a bit large so click 'Show code snippet'):
.navbar {
height: 95px;
margin: 0;
padding-left: 50px;
padding-right: 50px;
box-shadow: 0 3px 4px grey;
list-style-type: none;
}
.navbar > li {
height: 100%;
float: right;
}
.navbar > .navbar-logo {
width: 75px;
height: 75px;
margin: 10px;
float: left;
font-family: 'Oswald', sans-serif;
font-size: 50px;
}
.logo-compass-frame {
fill: none;
stroke: black;
stroke-width: 20;
stroke-linecap: round;
stroke-miterlimit: 10;
}
.logo-compass-north, .logo-compass-south {
stroke: black;
stroke-width: 8;
stroke-miterlimit: 10;
}
.logo-compass-south {
fill: none;
}
.logo-compass-center {
fill: black;
stroke: black;
stroke-width: 3;
stroke-linecap: round;
stroke-miterlimit: 10;
}<ul class="navbar">
<li class="navbar-logo">
<svg x="0px" y="0px" viewBox="0 0 272.6 272.6">
<circle class="logo-compass-frame" cx="136.3" cy="136.3" r="105.8"></circle>
<polygon class="logo-compass-north" points="138,63.6 123.8,110.5 138,134.5 152.2,110.5"></polygon>
<polygon class="logo-compass-south" points="138,209 152.2,162.1 138,138.1 123.8,162.1"></polygon>
<circle class="logo-compass-center" cx="138" cy="136.6" r="5.7"></circle>
</svg>
<span>Text</span>
</li>
</ul>I got it to the desired inline state with position: absolute on the span of text. But that leaves the text outside the bounds of the li.
How can I position the text inline with the SVG (without position: absolute)? I want the li to contain both the SVG and text within its bounds.