How do I position my SVG inline with text?

Question

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.

Answer 1

Your main problem is that you were, for some reason, setting the <li> to a narrow width:

.navbar > .navbar-logo {
  width: 75px;
  height: 75px;
}

Just get rid of those width and height values. You don't need them. That width and height should be applied to the SVG instead.

.navbar > .navbar-logo > svg {
  width: 75px;
  height: 75px;
  vertical-align: top;
}

The vertical-align is there to make the top of the text align with the top of the SVG. Plus we give the text line-height: 75px; so that it automatically centres itself vertically with the SVG.

End result

(After stripping out some other unnecessary bits)

.navbar {
  height: 95px;
  margin: 0;
  padding-left: 50px;
  padding-right: 50px;
  box-shadow: 0 3px 4px grey;
  list-style-type: none;
}

.navbar > .navbar-logo {
  margin: 10px;
  float: left;
  font-family: 'Oswald', sans-serif;
  font-size: 50px;
  line-height: 75px;
}

.navbar > .navbar-logo > svg {
  width: 75px;
  height: 75px;
  vertical-align: top;
}




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

Answer 2

Your issue is that either you put the navbar-logo class in the wrong place, or you put your height and width in the wrong place. You're applying your 75px dimensions on the container of the logo AND the text. Doing this is making the text wrap to the next line. Move the dimensions to the SVG and the text will want to sit next to it:

Notable code being:

.navbar > .navbar-logo > svg{
  width: 75px;
  height: 75px;
  display: inline-block;
}

.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 {
  margin: 10px;
  height: 75px;
  float: left;
  font-family: 'Oswald', sans-serif;
  font-size: 50px;
}

.navbar > .navbar-logo > svg{
  width: 75px;
  display: inline-block;
}

.logo-compass-frame {
  fill: none;
  stroke: black;
  stroke-width: 20;
  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>

Sidenote: Text needs to be adjusted a bit, but it seemed outside the scope of the question.

Answer 3

One possible solution could be to use white-space: nowrap; inside your .navbar-logo class. This avoid the line break you have.

.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;
  white-space: nowrap;
  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>

UPDATE

Here a solution using flex box model. This gives you more flexibility.
You can remove the middle and also the end wrapper if not need.

.navbar {
    height: 95px;
    margin: 0;
    padding-left: 50px;
    padding-right: 50px;
    box-shadow: 0 3px 4px grey;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-line-pack: stretch;
        align-content: stretch;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    overflow: hidden;
}

.navbar-set {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    -ms-flex-item-align: start;
        align-self: flex-start;
}

.navbar-set a {
    text-decoration: none;
    color: black;
    line-height: 95px;
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
}

.navbar-set.start {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
    text-align: left;
}

.navbar-set.middle {
    text-align: center;
}

.navbar-set.end {
    text-align: right;
}

.navbar > .navbar-logo svg {
  width: 75px;
  height: 75px;

  margin: 10px;

  float: left;
}





.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;
}

<div class="navbar">
  <div class="navbar-logo navbar-set start">
    <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>
    <a href="#" alt="">Text</a>
  </div>
    <div class="navbar-set middle">
        <a href="#" alt="">middle 1</a>
        <a href="#" alt="">middle 2</a>
    </div>   
    <div class="navbar-set end">
        <a href="#" alt="">Mend 1</a>
        <a href="#" alt="">end 2</a>
    </div>  
</div>

Answer 4

One of many possible solutions:

• Make your li width larger, I made it 100%.
• Give your SVG a set width.
• Make both the SVG and text float: left.
• Then give the text a padding-top to get it where you want to be.

.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: 100%;
      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;
    }
  
    
    #svg {
      width: 75px;
      float: left;
    }
    
    .text {
      float: left;
      padding-top: 15px;
    }
    

    <ul class="navbar">
      <li class="navbar-logo">
        <svg id="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 class="text">Text</span>
      </li>
    </ul>