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

Adjusting the width of tabs dynamically using jQuery

It's important to note that this question doesn't mirror the one found here. I am utilizing the jQuery UI Tab feature on my page and aiming for the tabs to occupy the entire width of the page. However, the number of tabs can vary between 0, 1, 2, ...

jqueryhtmljquery-uijquery-ui-tabs

Stylish Navigation Menu Logo/Site Name

Currently in the process of upgrading my website and I have my website name included as part of my menu, as opposed to a logo. This has been an easy solution that has worked well for me. For mobile screens, the template I purchased includes a slicknav men ...

javascripthtmlcssjsonslicknav

Which should I use - Angular directive or CSS selector, for better performance?

Currently expanding my knowledge on angular and exploring the capabilities of the ngClass directive. I have come across this interesting functionality: <li ng-repeat="language in languages" ng-class="{line:$even}">{{language}}</li> Alternativ ...

cssangularjs

Help display tooltips for ASP.NET resources using the resx string

Within my resource file, I have a string labeled Mini-move.Help. This string should be displayed each time a user clicks on the help image provided. NOTE: The help image is loaded dynamically when .HELP is added to the resource string. I am looking to cu ...

javascriptasp.netcssajaxresources

Developing interactive checkboxes for individual rows through React.js

Within a form, I have rows containing two inputs each. Upon clicking "add", a new row is created. For the second row onwards, by clicking "add" a checkbox labeled 1 should be added to indicate dependency on the previous row. In addition, for the third row, ...

javascripthtmlarraysreactjsdictionary

Achieving equal height for the englobing/parent div and the inner divs

To achieve a standard left, middle, and right column layout, it is necessary for me to enclose various inner divs of different heights within a surrounding/parent div. It is crucial that the parent div adjusts its height to match the tallest inner div, whi ...

csshtml

Transition/transform/translate3d in CSS3 may lead to significant flickering on the initial or final "frame" of the transition (specifically on an iPad)

Hello everyone, I am currently developing a web application specifically for the iPad and I have implemented a CSS3 transition to animate a div, moving it from left to right. Here is the structure of my class: .mover { -webkit-transition:all 0.4s ea ...

jqueryanimationcss

Creating a dynamic text design using Bootstrap or CSS: What's the best approach?

I attempted to enable responsive font sizes in Bootstrap 4.3.1 by setting the $enable-responsive-font-sizes variable to true, but I did not see any changes. Below is the code from my template.html file: <div class="m-2" id="role" ...

cssangularbootstrap-4responsive

Pattern for identifying Google Earth links with regular expressions

I'm attempting to create a regular expression that can validate whether the URL entered by a user in a form is a valid Google Earth URL. For example: https://earth.google.com/web/@18.2209311,-63.06963893,-0.67163554a,2356.53661597d,34.99999967y,358.13 ...

javascripthtmlregex

Guide to importing a JSON file into Vue.js and HTML

I'm a beginner in Vue and not very familiar with HTML I'm attempting to import data from a JSON file into my interface to display it for the user. Below is the structure of the JSON: [ { "Title": "SOFT-STARTER", "Cod&q ...

javascripthtmljsonvue.jsvuejs3

Disable the "top" property for the Material UI Drawer component

I'm currently working on implementing a Persist Left Drawer from Material UI that slides in from the left side. However, I don't want the drawer to cover the entire left side of the page. Essentially, I want to remove the "top" style property men ...

cssreactjsmaterial-ui

Bootstrap 4 and Angular 7 application experiencing issues with toggle button functionality in the navigation bar

I am currently working with Angular7 and Bootstrap4. I am attempting to integrate a navbar into my application, but I am facing an issue where the toggle button does not work when the navbar is collapsed. It is important for me to mention that I do not wa ...

htmlcssbootstrap-4angular7

Conceal the scroll bar within a div set to 100% viewport

Having some difficulty with a scrollbar on my new portfolio. The layout consists of two columns, with content on the left. I need the ability to scroll without displaying the scrollbar. I attempted the code below but it did not work. Could the issue be rel ...

htmlcss

Tips for repairing buttons in the CSS container

The buttons in the CSS search-box are not staying fixed as intended. They should be within the search box, but instead, they are protruding out of the panel. I attempted to utilize z-index, but it did not produce the desired outcome. https://i.sstatic.n ...

javascriptjqueryhtmlcss

Float two DIVs horizontally with the same height using jQuery

Having a strange issue with the website I'm currently working on and can't seem to figure out what's causing it. Something is definitely off with my javascript, but I just can't pinpoint the exact problem. Here's the situation: I ...

javascriptjqueryhtmlcss

Discovering the amount of attributes possessed by an element with jQuery

If I have an xml element like this: <fruit color="blue" taste="sweet" shape="round"></fruit> Without using jQuery, I could use the following code: fruit.attributes.length How can I achieve the same result with jQuery? ...

javascriptjqueryhtmlxml

Styling Overflow in Coda Slider using CSS

Currently utilizing the Coda Slider for my project. For those unfamiliar with the Coda Slider, it initially hides the overflow-x position until a tab is clicked. This triggers an animation that slides the hidden DIV in either from the right or left side. ...

jquerycsscoda-slider

When viewed on a mobile device, the page defaults to displaying the NumPad instead of the Text Keyboard in Angular

The email field in my angular app is opening a Key Pad in mobile view and I'm not sure why. <form (ngSubmit)="onSubmit()" #emailForm="ngForm"> <div class="emailaddress" style="text-align:center;" *ngIf="!showEmail"& ...

htmlcssangular

Is there a way to narrow down the font choices using HTMLPurifier?

- Currently in my project, I have incorporated an HTML-WYSIWYG Editor that allows users to utilize various Webfonts for styling their texts. The editor I am utilizing can be found at NiceEdit. It generates code snippets such as: <font face="c ...

phphtmlfontswysiwyghtmlpurifier

Preventing Banner Images from Covering Side Carts in E-commerce Stories - Tips and Tricks

I'm encountering an issue with the side cart and suspect that my CSS is to blame. Can you assist me in resolving this problem? The webpage has a background image—a full-width banner. However, when I open the side cart, the image overlaps it, concea ...

htmlcssimagebackground