Using the HTML <span> and svg elements together does not allow them to be inline with each other

In my current scenario, I have a fieldset that is inline with another one on the page. The specific fieldset in question contains an SVG circle and some text.

My objective is to have both elements inline with each other, while allowing the fieldset to adjust its size based on changes I want to make to the text within <span>/<p> tags and the color of the circle, depending on a function that returns true or false.

The code I am currently working with is as follows: 

<div>
  <fieldset class="fieldset-auto-width">
    <legend>some legend</legend>
    <div>
      <svg height="32" width="32"><circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/></svg>
    </div>
    <span>some text</span>
  </fieldset>
</div>

Here is the JSFiddle link to view the code along with CSS styles.

I have been struggling for about half an hour trying to figure out if the second div wrapping the SVG element is necessary. Initially, I included it to set a maximum size for the SVG element due to unwanted space, even with style="display: block"

My ultimate goal is to align my SVG circle and <span> element inline together.

I am using <span> instead of <p> at the moment to minimize the excessive space below the SVG. This issue is less problematic when using a <span> compared to a <p>.

Edit: The previous JSFiddle link was incorrect.

htmlcsssvginline

Answer №1

Here is the solution. The div element is a block-level element, so in order to display it inline, you need to set its display property to inline-block. Additionally, the CSS property vertical-align: middle can be used to vertically align elements within the div.

<div>
<fieldset class="fieldset-auto-width" >
<legend>some legend</legend>
<div style="display: inline-block; vertical-align: middle">
<svg height="32" width="32">
<circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/>
</svg>
</div> 
<span>some text</span>
</fieldset>
</div>

Answer №2

It seems like there may be some confusion about the positioning of your span element in relation to the SVG container. The issue could be that the SVG is set to display inline-block, which does not affect the span element since they are not in the same container.

To vertically align these two elements, you can try applying vertical-align: middle to both the SVG and span elements, while also ensuring the SVG is set to display: inline-block.

You can view an updated version of the code here: https://jsfiddle.net/X2198qsm/9/

      <div>
        <svg height="32" width="32">
           <circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/>
        </svg>
        <span>additional text</span>
      </div>

Answer №3

A <div> typically has a default style of display: block.

If you want the content inside the div to be displayed inline with the element that follows it, consider using a different approach instead of placing a div.

<div>
<fieldset class="fieldset-auto-width" >
<legend>some legend</legend>
<svg height="32" width="32">
<circle id="circle" cx="16" cy="16" r="15" stroke="#333" stroke-width="1" fill="#ffbf00"/>
</svg>
<span>some text</span>
</fieldset>
</div>

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

Using Javascript to display or conceal a specific child element within a loop, based on which parent element has been clicked

I need assistance with creating a grid of projects where clicking on a specific 'project' in the loop will display the corresponding 'project_expanded' div, while hiding all other 'project_expanded' divs. My initial plan was ...

javascriptphpjqueryhtmlwordpress

arrange fixed-top elements in a stacked manner using Bootstrap 4

I am looking to inform users about enabling JavaScript for optimal use of the website, and I want this message to appear above the navigation bar using Bootstrap. However, currently they are stacking on top of one another instead of displaying in the desir ...

csshtmltwitter-bootstrapbootstrap-4

The arrangement of a table, an iframe, and another table being showcased in close proximity

I need assistance in aligning a table, an iframe, and another table side by side without any breaks. Ideally, I would like all three elements to be centered on the page. It seems odd that they're not displaying next to each other as my screen is larg ...

javascripthtmlformattingline-breaks

Advantages of using individual CSS files for components in React.js

As someone diving into the world of Web Development, I am currently honing my skills in React.js. I have grasped the concept of creating Components in React and applying styles to them. I'm curious, would separating CSS files for each React Component ...

javascripthtmlcssreactjsweb

Preventing Form Submission from Redirecting to the Top in an HTML Document with PHP

Recently, I integrated a php form into my html code and changed the file from index.html to index.php. The contact form is functioning perfectly and sending all information as expected. However, after submitting the form, users are receiving the message "T ...

phphtmlhttp-redirect

Using PHP, show a specific table row when clicked by matching the ID

I am currently developing an application for a school project that manages tests. This app allows employees to log in, select a client, register clients, and conduct tests with them, all while storing the data in a database. I have successfully implemente ...

javascriptphphtmlmysqldatabase

Increase the gap between columns in Bootstrap for a better layout

I have implemented a web layout using bootstrap 3. You can view the JSFiddle here. In order to make the layout responsive, I had to structure it in a slightly unconventional way. The final output on small screens includes three information boxes within an ...

htmlcsstwitter-bootstrap

Can I give a "label" to the information being retrieved from the database?

I am looking to give a name to the answers fetched from the database. Currently, I am configuring a questionnaire/quiz with the questions and corresponding answers stored in the database. Here is my PHP code snippet: public function site() { $db = n ...

phphtml

Tips for refreshing a specific div element at set intervals using JQuery AJAX?

I need to make updates to a specific div element without refreshing the entire HTML page. The code below currently works, but it reloads the entire HTML page. Additionally, I am working with different layouts where I have separate files for the header, l ...

javascriptjqueryhtmlajaxmarko

What is the best way to create a button with a dynamic background animation in React?

Looking to design a button with an animated background, possibly in gif or video format. An example of what I have in mind is the DOWNLOAD button on this website's main page: Ideally, I am hoping for a solution using React. ...

javascriptcssreactjsuser-interfaceuser-experience

If there is no content present, the html element with contenteditable will have an <br>

I'm encountering an issue with a <div contenteditable="true"></div>. Whenever I enter content into it and then delete that content, the browser seems to automatically insert a <br> element into the div. Has anyone else experienced th ...

html

Transmit a parameter from a JavaScript code to a Python script

I am using a python script to execute queries in an Oracle Database by passing arguments. prov.py #!/usr/local/bin/python2.7 import sys import argparse import cx_Oracle import json import cgi import cgitb cgitb.enable() lst_proveedores=[{}] conn_str = & ...

javascriptpythonhtmlajax

List generated by BeautifulSoup contains duplicate entries - require a distinct linked list

I am currently attempting to compile a list of unique year links from a specific website (referenced below). Whenever I use the append function, it generates a lengthy list with repeated entries. My goal is to obtain a list that only consists of distinct ...

pythonhtmllistweb-scrapingbeautifulsoup

You are unable to align a paragraph with a specific width in the center

I adjusted the width of a paragraph to make it less stretched out horizontally and more compact. However, when I attempted to center align the text within the paragraph using text-align: center;, only the direction of the paragraph was centered. The chall ...

htmlcss

Adjust the placement of a div within another div based on various screen sizes dynamically

Currently, I am working on an Ionic 2 app where the user is required to select specific points on the screen. These coordinates will then be utilized on another screen with a different size. My initial attempt at using rule of three/cross multiplication pr ...

javascripthtmlcssangularionic2

Adding a class to an img tag with TinyMCE

Currently, I am utilizing the TinyMCE editor as a standalone editor in my content management system (CMS). Within the CMS, there is an automatic setting that adds a curved border to any image tags within the cms div ID. In certain cases, I require the op ...

phpjavascriptcsstinymcewysiwyg

What are some strategies to prevent a fixed sidebar from obscuring content while zooming in?

I've been working on adding a fixed sidebar for a table of contents (TOC) to a website, where the sidebar stays in place as the user scrolls up and down. My implementation includes the following HTML code: and CSS code: I took inspiration from a tu ...

htmlcss

The visual content I have does not fill up the entire screen, which results in some empty spaces in the layout

Whenever I insert an image, I strive to have it fill the entire space but end up with white gaps. This is my code: <div style="background-image: url('../assets/img/food-with-ingredients.jpg'); -webkit-background-size: cover; -moz-back ...

cssbootstrap-5

Utilize Jquery to insert new text into a textbox and then organize the contents of the textbox using Jquery

Currently, I am utilizing the ASP.NET asp:checkboxlist control which consists of 36 listitems, displaying 36 checkboxes. The HTML representation resembles a table format. My goal is to dynamically add checked items in this div in a sorted manner. Additiona ...

jqueryasp.nethtmljquery-ui

Is the form data in AngularJS not submitting correctly?

Why is my HTML form data not being submitted using POST method? HTML View Page:- <div class="col-sm-12"> <div class="card-box"> <form class="form-inline" name="addstock" ng-submit="saveStockPurchaseInvoice()"> <h ...

angularjshtmlcodeigniter-3