Ways to center a vertically aligned SVG in relation to text using Bootstrap

After experimenting with bootstrap, I have encountered an issue where I cannot vertically center an inline SVG relative to text. Below is a simplified example showcasing this problem:

<!DOCTYPE html>
<html>
  <head>
    <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77777c7b7c7a6968733e7c607f6a">[email protected]</a>/dist/css/bootstrap.min.css"
  />
  </head>
  <body">
    <div style="background-color: lightgrey;" class="row align-items-center">
      <div class="col-auto">
        <svg height="16" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
          </svg>
      </div>
      <div style="text-transform: uppercase;" class="col pl-0">test</div>
    </div>
  </body>
</html>

Upon zooming to 500%, it becomes apparent that the SVG is not perfectly centered but slightly lower than expected. Interestingly, I found that removing the !DOCTYPE declaration results in the SVG being centered correctly in both Firefox and Chrome. Additionally, increasing the SVG size to 32 also resolves the issue. I am baffled as to why the presence of the doctype or the SVG size would impact the vertical alignment. Can you shed light on the root cause of this problem?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

I believe the solution lies in adding the class d-flex to the wrapping div element containing your svg, rather than anything related to the !doctype declaration. 

<!DOCTYPE html>
<html>
  <head>
    <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="492b26262d3a3d3b2839097d677f6779">[email protected]</a>/dist/css/bootstrap.min.css"
  />
  </head>
  <body>
    <div style="background-color: lightgrey;" class="row align-items-center">
      <div class="d-flex col-auto">
        <svg height="16" viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
          </svg>
      </div>
      <div style="text-transform: uppercase;" class="col pl-0">test</div>
    </div>
  </body>
</html>

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 explain the meaning of the tag "&" ">" "*" in the context of useStyles functions?

After experimenting with React and Material-UI, I came across an interesting pattern in the code. When using the useStyle function, developers often create a class called 'root' and utilize the tag & > *. I tried to research the meaning be ...

cssreactjssassmaterial-ui

Tips for utilizing flexbox to position a button to the right of an InputSelect

Struggling to position a button next to a dropdown? No matter what I attempt, the button keeps ending up above the dropdown. Ideally, I'd like it to appear alongside 'Select Organisation' as shown in the image below: https://i.sstatic.net/w ...

c#css.netflexboxblazor

How do I prevent my image slider from scrolling to the top of the page when I click next or prev?

<script> export default { name: "ImageSlider", data() { return { images: [ "https://cdn.pixabay.com/photo/2015/12/12/15/24/amsterdam-1089646_1280.jpg", "https://cdn.pixabay.com/photo/2016/02/17/2 ...

javascripthtmlvue.js

Dynamic CSS columns with a set width on the left and right sides

Dividing my background into two parts has been a challenge. Background Image #1 Endlessly Repeating Background Image #1 Background Image #2 Endlessly Repeating Background Image #2 In CSS, creating a background with multiple elements is not as simple as i ...

htmlcssdynamic

Creating a customized icon scheduling feature with CSS

Creating an icon using CSS that looks like the one below seems to be quite challenging. I attempted to achieve it with this approach, but the result was not satisfactory. https://i.stack.imgur.com/5W7Hj.png .schedule { height: 10px; width ...

htmlcss

What is the method for deactivating a hyperlink with CSS?

Within my wordpress page, there is a specific link present. This particular link belongs to a class. Is it viable to deactivate this link solely through the use of CSS? <a class="select-slot__serviceStaffOrLocationButton___5GUjl"><i class="mater ...

htmlcsswordpress

How to make a letter stretch all the way down the paper?

As I'm creating a table of contents for my website, I was inspired by an interesting design idea that I came across: I am particularly drawn to how the T extends down and each section is numbered with the title wrapped around it. How can I achieve th ...

htmlcss

How to Extract Text Content Excluding the Wrapping Tag from an Element Using JSoup

How can I take the text 'Some random text' and enclose it within a span tag? For example, if I have the following element: <div> Some random text 1 <a href="some_url">Go to Link</a> </div> <div> <spa ...

javahtmljsoup

Using CSS, eliminate the drop-down menu from the main navigation on Squarespace

While working on my Squarespace website, I've been impressed with how the FAQ page/questions are structured. However, a drawback is that it creates a clunky drop-down menu when hovering over the FAQ tab in the main navigation. You can see an example ...

cssdrop-down-menusquarespace

Send the user to the chosen option in the dropdown menu

My goal is to redirect the user based on the option they select. I am having an issue with my HTML code as it currently redirects to "example.com/page" instead of "example.com/page/1". Can someone please assist me in resolving this problem? <select clas ...

javascripthtmldropdown

Is there a way to modify the text within a hyperlink using jQuery?

Here is the link HTML code snippet: <a href="#" onclick="run(1); return false;" class="link" title="Remove item">[x]</a> I am looking to modify this using jQuery to display like this: <a href="#" onclick="run(1); return false;" class= ...

jqueryhtmlhyperlink

IItemTransform and minified files that are already in use

Summary: IItemTransform is not triggered when a minified file already exists in the same directory as the original (non-minified) file. Issue Description The problem arises due to CSS relative image references, impacting both JavaScript and CSS files when ...

asp.netcsstransformationbundling-and-minificationsystem.web.optimization

Press the designated button located within a table's td element to retrieve the values of adjacent td elements

I need to implement a functionality where clicking a button within a <td> element will retrieve the values of other <td> elements within the same row (<tr>). Here is the current implementation: $(document).ready(function(){ ...

javascriptjqueryhtml

Strategies for eliminating all elements with a particular innerHTML content

function removeElements() { let li = document.getElementsByClassName("li"); for (var i = 0; i < li.length; i++) { if (li[i].innerHTML === "hello") { li[i].parentElement.remove(); } } } <li> <span class="li">hi</sp ...

javascripthtmljquery

Using pure CSS to style sibling span elements in a unique color

Looking to change the color of a specific span based on the title attribute of another span in a different div. The code below successfully turns text2 red if it has the title of "Red". span[title=Red] ~ span { color: red; } <span title="Red" ...

htmlcss

New to CSS/Ruby - What causes two adjacent buttons to have varying sizes?

The varying sizes of my search and login buttons located beside each other are puzzling me. Could it be due to the fact that the search button is enclosed within a submit_tag argument while the login button is not? If this is indeed the case, how can I mak ...

htmlcssruby

What is the best way to add an Apple iPhone-like effect to a menu list?

I've been working on creating a menu similar to the Apple menu using the greensock api Here is my progress so far: JSFIDDLE Update This is what I am aiming for: Fiddle Any idea why there is flickering when hovering over it? <div class="de ...

jqueryhtmlcssgsap

Issue with CSS background scaling bug

Is it possible to make the cloud background scale within the box? The current issue can be viewed here: I have tried various methods to resolve the problem where the background scales even beyond the limited box. However, I could not identify the solutio ...

htmlcssanimationbackground

Ensure that the navigation menu is consistently displayed properly, without any of its contents extending beyond the

I am experiencing an issue with the navigation menu on my website. Everything looks great in normal view, but when I resize the browser window to a smaller width, the menu ends up overflowing below the main content. I want the navigation menu to always dis ...

htmlcss

The challenge of vertically aligning text in a dynamically generated div

Currently, I am in the process of developing a straightforward application that allows for the dynamic addition of students and teachers. I am dynamically adding divs with a click function. To these dynamically created divs, I have assigned the class "us ...

javascripthtmlcss