Vertically and horizontally align an SVG within 2 divs without modifying the parent div of the SVG

Is there a way to center an SVG both vertically and horizontally inside a div? The issue is that the width and height of the SVG are determined using the vx-responsive library, resulting in the following DOM structure:

https://i.sstatic.net/3p2wc.png

Edit: code has been added below

<div class="w-100 h-70 bg-yellow pa3 ba b--red flex flex-center center-vertical">
  <div style="width: 100%; height: 100%">
    <svg width="41.59375" height="25.208">
      <rect x="0" y="0" width="41.59375" height="25.208" stroke="green"></rect>
    </svg>
  </div>
</div>

The current result is shown below:

https://i.sstatic.net/ffYZj.png

I am unable to remove the inner div as it is necessary, but I cannot add any additional properties to it. What can be done to resolve this issue?

csshtmlsvgflexbox

Answer №1

Here is a handy technique for aligning an HTML element in the center:

.w-100{
width:100vw;
height:100vh;
}
.w-100 div{
position:relative;
}
svg{
display:block;
margin:auto;
position:absolute;
top:0; bottom:0; left:0; right:0;
}
<div class="w-100 h-70 bg-yellow pa3 ba b--red flex flex-center center-vertical">
  <div style="width: 100%; height: 100%">
    <svg width="41.59375" height="25.208">
      <rect x="0" y="0" width="41.59375" height="25.208" stroke="green"></rect>
    </svg>
  </div>
</div>

For more information on this topic, you can refer to this article: Centering in CSS: A Complete Guide

Answer №2

<div class="w-100 h-70 bg-yellow pa3 ba b--red flex flex-center center-vertical">
  <div style="width: 100%; height: 100%">
    <svg width="41.59375" height="25.208">
      <rect x="0" y="0" width="41.59375" height="25.208" stroke="green"></rect>
    </svg>
  </div>
</div>

to utilize the following code instead:
--------------------------------

    <div class="w-100 h-70 bg-yellow pa3 ba b--red flex flex-center center-vertical">
        <svg width="41.59375" height="25.208">
          <rect x="0" y="0" width="41.59375" height="25.208" stroke="green"></rect>
        </svg>
    </div>
--------------------------------

.w-100 {
  width: 100px;
}
.h-70 {
  height: 70px;
}
.bg-yellow {
  background:yellow;
}
.flex{
  display:flex;
  flex-wrap:wrap;
}
.flex-center {
  justify-content:center;
}
.center-vertical {
  align-items:center;
}

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

What is the best way to restrict a link to only a specific div element and not a Bootstrap

My HTML conundrum involves a div styled with the class .win_box: This particular div is nested within a Bootstrap column, and the link associated with it extends throughout the entirety of said column. However, I want to restrict user access to this link ...

htmlhyperlink

Ways to widen a selected drop-down menu outside the dialog box containing it

I'm working with a Html.DropDownList that has been styled using Chosen within a jQuery UI dialog. As the list of items is quite long, when it's opened, it gets cut off by the border of the dialog window. Is there a way to extend the dropdown por ...

jqueryhtmljquery-uijquery-ui-dialogjquery-chosen

Issue encountered when attempting to remove an element from an array using the delete method

Whenever I attempt to remove an input that has been added, an error message saying "Value is NULL" pops up. I'm looking for a solution where only the selected inputs are deleted when I click on DELETE, instead of all inputs being removed. The myFuncti ...

javascripthtml

When I attempt to incorporate multiple sliders on a single page, I encounter difficulties in determining the accurate stopping position if the number of slides varies

I am having trouble setting the correct stop position for sliders with different numbers of slides on a page. When I have the same number of slides in each slider, everything works fine. However, I need to have a different number of slides in each slider ...

javascriptjqueryhtmlcss

Expand the dimensions of the file upload field to make it taller and wider

I am trying to create a file upload field within a transparent div sized at 150px x 150px. The goal is for the file dialog box to pop up when any part of the div is clicked, allowing the user to select a file for upload. Despite my attempts, I haven't ...

jqueryhtmlcss

Perform CSS transitions simultaneously

Hey there! I'm currently working on a button that includes a Font Awesome icon at the end of it. To display the icon, I'm using the :after pseudo-element on the button, which is working fine so far. The issue I'm facing is with the CSS tran ...

htmlcssbuttoncss-transitions

How can I show the content of a variable in Next.js without displaying any HTML tags?

For instance, I have the description variable set up like this in NextJS: description={storeDetail?.translation?.description} When outputting the description, it shows me <p>Tenis</p>. However, I would prefer to display just "Tenis" without th ...

htmlnext.js

The anchor tag causes the tooltip to display outside of the td element

One of my requirements is to display the click percentage for each link in an HTML template that is dynamically fetched from a database. I attempted to show the click percentage for each anchor link by adding them to the `data-title` attribute using jQuery ...

javascriptjqueryhtmlcss

Output in Typescript for the chosen option

A message can be sent based on the user's choice of either Now or Later. If the user selects Now, the message will be sent immediately. If Later is chosen, a date format option needs to be created for setting a future date. <label for=""& ...

htmlangulartypescript

How can you position the nav collapse toggle to the far right while still allowing it to collapse downwards on smaller devices with Bootstrap 5?

I am in need of a navigation section that is always visible on all devices, with a collapsible toggle aligned to the right. In Bootstrap 5.2, if I place the collapse toggle after the <div class="collapse navbar-collapse ..., the collapsible conten ...

htmlcssnavbarbootstrap-5markup

The dilemma of calculating the total width of jQuery's list items

I am in the process of creating a submenu that should look like this: HTML: <ul class="mainMenu clearfix"> <li><a href="#">Eurodan huset</a></li> <li><a href="#">Hustyper</a></li> <li&g ...

jquerycss

Is there a way to position the twitter embed at the center of a webpage?

I am attempting to embed a Twitter video and twit in such a manner that they are perfectly centered on the page and also take up the entire width of the container (my-container). Here is the HTML code that I currently have: <div class="my-container"&g ...

htmlcsstwitter

Prevent side-to-side scrolling on elements that exceed the width of the screen

I am working on building a navigation system similar to Google Play, where there are fixed tabs for browsing through the app. I have created a container div that holds various content sections. <div id="container"> <div class="section"> .. ...

javascripthtmlcssmobile

Verify if the specified value is present in the dropdown using AngularJS

Utilizing AngularJS, I have implemented an input field with autocomplete functionality. The autocomplete feature pulls data from a JSON file and displays it in a dropdown table format. Users are able to filter the results and select a value from the dropdo ...

javascripthtmlangularjsvalidation

Creating a simple bootstrap code for developing plugins in Wordpress

After successfully coding in Brackets with the Theseus plugin on my local machine, I encountered a problem when attempting to transfer my code to a Wordpress installation. The transition from Brackets to Wordpress seems far more complicated than expected. ...

javascriptphpcsswordpressplugins

The pattern() and onkeyup() functions are unable to function simultaneously

When trying to display a certain password pattern using regex while typing in the fields, I encountered a problem. The onkeyup() function works for checking if both passwords match, but it causes the pattern info box not to appear anymore. I'm curiou ...

javascripthtmlcssregex

The external HTML page fails to load within a div in Firefox browser

My jquery script successfully loads an external HTML page into a div when tested on Chrome, but it's not functioning properly on Firefox. Here is the demo link. Could someone please explain why this code snippet is not working on Firefox? Code: &l ...

jqueryhtmlajaxloading

After a link is clicked in the Rails web app, the style undergoes a subtle transformation

Encountering an issue with my HTML/CSS that seems to be connected to Rails and its asset pipeline. Initially, the styling of my web app is perfect on the first page load (and hard refreshes). However, as soon as I click on a link, navigate away from the pa ...

htmlcssruby-on-railsruby-on-rails-4asset-pipeline

Exploring the anatomy of the img src tag

Using jQuery, I have successfully implemented code to display an image when clicked by storing the image source into a variable like this: var imgSrc = $(event.target).attr('src'); I then use this variable to add the image to a div and show it o ...

jqueryhtmlcss

jinja2.exceptions.TemplateSyntaxError: instead of 'static', a ',' was expected

My current project involves using Flask for Python, and I encountered an error when running the project from PyCharm. The error message points to line 192 in my home.html file: jinja2.exceptions.TemplateSyntaxError: expected token ',', got &ap ...

javascriptpythonhtmlflask