What is the best way to align my SVG to display inline with text?

I am trying to add an SVG image next to some text in a navbar, but I'm running into some issues. The SVG is overflowing from the navbar instead of aligning inline with the text.

Here's a snippet of my HTML code:

I tried using position: absolute on the span, but that caused it to go outside the boundaries of the li. How can I make sure the text aligns inline with the SVG without using position: absolute? I want both the SVG and text to be contained within the bounds of the li.

htmlcsssvg

Answer №1

Your primary issue arises from the fact that you had set the <li> to a narrow width unnecessarily:

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

Simply remove those width and height declarations. They are not required. Instead, allocate the width and height values to the SVG element.

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

The vertical-align directive ensures text alignment with the top of the SVG. Additionally, we assign line-height: 75px; to the text so it vertically centers itself with the SVG automatically.

Final Outcome

(After removing some unnecessary elements)

.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

To prevent the line break in your .navbar-logo class, you can utilize the white-space: nowrap; property.

.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

For more flexibility, consider using the flexbox model for your navbar. You can adjust the alignment by removing or adding wrappers as needed.

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

The problem lies in the placement of the navbar-logo class or the incorrect application of height and width values. Setting dimensions of 75px on both the logo container and text is causing the text to wrap onto the next line. To resolve this issue, move the dimensions to the SVG element so that the text can align beside it:

Key code snippet:

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

Note: Minor adjustments may be needed for the text alignment but are beyond the immediate concern.

Answer №4

Below is a potential solution to the issue:

  • Try increasing the width of your li element, for example, setting it to 100%.
  • Ensure your SVG has a defined width.
  • Consider using float: left for both the SVG and text elements.
  • Add some padding to the top of the text element using padding-top.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you identify the specific name of the IE CSS bug affecting double vertical padding?

(Just when I thought I've encountered all the strange IE CSS bugs, here comes another one. Is there a name for this double-vertical-padding bug?) After creating a simple test case that worked perfectly in browsers like FF and Opera, I was surprised t ...

cssinternet-explorer

Develop adaptable flex items

I am working with a container element that contains variable child elements whose width I want to scale. To see an example of what I'm trying to achieve, take a look at this simple plunker: https://plnkr.co/edit/ef0AGPsK7FJJyBqgWuMi?p=preview When ...

htmlcssflexboxalignment

Is it possible to display a "click" message when a button is hovered over using CSS?

Whenever I hover over a button, I struggle to receive the appropriate message like "click" or "enter" before actually clicking it. How can I use CSS to style my buttons in a way that allows for this pre-click messaging? I have tried approaches such as .bu ...

htmlcssbutton

Can you tell me if the "dom model" concept belongs to the realm of HTML or JavaScript?

Is the ability to use "document.X" in JavaScript to visit an HTML page and all its tags defined by the HTML protocol or the ECMAScript protocol? Or is it simply a choice made in the implementation of JavaScript, resulting in slight differences in every bro ...

javascripthtmldommodelprotocols

Finding a jQuery DOM element without using a loop

Can the element in variable d be identified directly instead of looping through each function? Take a look at the DOM below: <!DOCTYPE html> <html lang="en"> <head> <title></title> <script src="../jquery-ui ...

jqueryhtmlcss

Incorporating a header include on every page throughout my website

Is there a way to include headers and footers in your HTML web pages without having to duplicate code on every page? I understand that this can be done using PHP, but what if you are creating a website solely with HTML? If there is no solution to avoid r ...

htmlinclude

Aligning the text in the middle of a button

Currently delving into Front-End development and in the process of coding my maiden site using bootstrap. Encountered a roadblock on something seemingly simple. How can I center text within a button? Here's the button, the default one utilizing an " ...

htmlcsstwitter-bootstrap

Show the text area content in an alert when using Code Mirror

When I try to alert the content of a textarea that is being used as a Code Mirror on a button click, it appears blank. However, when I remove the script for Code Mirror, the content displays properly. I am puzzled about what could be causing this issue wi ...

javascriptjqueryhtmlcodemirror

Repeatedly triggering the Jquery Dialog Event

When I open a calendar plugin in jquery dialog, I encounter a recurring issue. Every time I close and reopen the dialog, my calendar event onDayClick triggers multiple times – twice, thrice, and so on. <div id="show_calendar"> <div class="c ...

javascriptjqueryhtmldialogrepeat

The true screen resolution of Safari on iPhone devices

I'm feeling a bit lost right now. Currently, I am using Jquery Mobile and here is my code: <meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no' name='viewport'> When I ran the following ...

htmljquery-mobile

CSS - setting all child elements to the height of the tallest child element

Is there a way to ensure that both fieldsets have the same height as the tallest one? See the code snippet below or visit this link for reference: http://jsfiddle.net/zpcXQ/2/ <div id="parent"> <form> <fieldset id="left"> ...

htmlcss

Dividing an AngularJS module across multiple iFrames on a single webpage

Currently, I am working on a web application that consists of 1 module, 5 pages, and 5 controllers. Each HTML page declares the same ng-app. These pages are loaded within widgets on a web portal, meaning each page is loaded within an iFrame in the portal. ...

javascripthtmlangularjsiframe

Tips for adjusting the placement of enlarged images within colorbox

I recently discovered colorbox and decided to use it as my lightbox solution. However, I encountered a challenge with positioning the background (#cboxOverlay). I wanted to move it 120px to the left so that some content from the original page would still ...

jquerycsscolorbox

What is the process of creating a download link for a server file in a web browser?

I am attempting to create a straightforward download link for a PDF file that users can upload and then have the option to download. I would like this download feature to appear either in a pop-up box or simply on the Chrome download bar. Despite trying v ...

javascriptphpjqueryhtmlpdf

Utilizing CSS for Page Orientation

For my current project, I was tasked with designing a print view using HTML & CSS. This view is then converted into a PDF on the server and sent to an A5 printer for physical output. One of the specific requirements of this assignment is that the first pa ...

htmlcssprintingflying-saucer

Is there a way to remove the bold styling from text next to JavaScript?

I recently launched a website at www.mvscaccounting.com, and I added a search engine made from javascript at the bottom of the page. Next to it, I wanted to put a "all rights reserved" notice. However, whenever I try to add any text next to the search engi ...

javascripthtmldreamweaver

react: implement custom context menu on videojs

Can someone assist me with adding a quality selector and disabling the right-click option in a webpage that uses videojs? I am unsure about using plugins, as there were no examples provided in react. Any guidance would be appreciated. VideoPlayer.js impor ...

javascripthtmlreactjsreact-routervideo.js

Adjust the initial scroll position to - apply overflow-x: scroll - on the specified element

I have an image that can be scrolled to the right on screens that do not fit the full width, but I want the center of the image to be displayed first instead of the left side. Below is my React code: import React, { useEffect, useRef, useState } from &qu ...

javascripthtmlcssreactjs

Differentiate between chrome and chromium with the help of Javascript programming

Can we differentiate between Google Chrome and the open-source Chromium browser using JavaScript? It appears that the navigator.userAgent property is the same in both browsers. ...

javascripthtmlgoogle-chromechromium

Get rid of angular comments in an HTML document

Is it feasible to eliminate or deactivate the HTML comments generated by Angular? <ol class="items"> <!-- ngRepeat: item in list | orderBy:'time':true --> </ol> This is disrupting CSS rules that utilize the :empty pseudo c ...

cssangularjs