Aligning an SVG within a container div

I am trying to display an SVG image inside a fixed-position div. Here is the HTML:

<div class="main">
  <svg class="svg" viewBox="0 0 180 100">
    <rect height="100%" width="100%" fill="#003300"></rect>
  </svg>
</div>

and CSS styling for it:

.main {
  position:fixed;
  left: 100px;
  height: 100%;
  width:100%;
  background: #33AAAA;
}

.svg {
  display: block;
  height: 100%;
  width: 100%;
  position:static;
}

I want the SVG to be centered both horizontally and vertically, but I am encountering some strange behavior. When the browser window size changes, the SVG is not properly centered, as shown here: https://i.stack.imgur.com/DdKo6.png there is more space on the left than on the right.

You can view the Codepen version (including CSS reset) here: Codepen

htmlcsssvg

Answer №1

The element is being set to a width of 100%, and then shifted by 100px. Even though it's being shifted, the original width is still calculated as 100%. To center it as intended, you will need to adjust the width by subtracting 100px or rearrange the structure.

.box {
  position:fixed;
  left:100px;
  height: 100%;
  width:calc(100% - 100px);
  background: #33AAAA;
}

Answer №2

Seems like the issue stems from the left: 100px property within your main class. Removing it should resolve the centering problem.

Here is an alternative main class that should achieve the desired result:

.main {
  position:fixed;  
  left:0;
  height: 100%;
  right: 0;
  top:0;
  bottom:0;
  background: #33AAAA;
}

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

Adjust the viewport width based on the width of the device

Having difficulty adjusting the meta tag viewport content width based on device width, I am struggling to achieve my desired outcome. Here is the code snippet I have been working with: Code snippet: <meta id="viewport" name="viewport" content="width=d ...

javascripthtmlioscssviewport

What is the best way to trigger a function when a button is enabled in Angular 8?

Here is a portion of my sign-in.component.html file. I have created a function in the corresponding sign-in.component.ts file that I want to trigger when the button below becomes enabled. Here is an example of what I am trying to achieve: <div class= ...

javascripthtmlangularangular8

Tips for utilizing mysql_connect(...) on a web hosting platform

Recently, I signed up for a web hosting service and have just started learning PHP and MySQL. I came across this video tutorial https://www.youtube.com/watch?v=gvGb5Z0yMFY which demonstrates how to add a row to a table. In my MySQL database, I have a table ...

phphtmlmysql

"Unable to Access Account: PHP Login Script Failing to Log Users In

I've encountered a login issue with my website script that I can't seem to figure out. The script is designed to log users in after they input their username and password, but for some reason, even with the correct credentials, authentication fai ...

phphtmllogin-script

Issue with functionality of Bootstrap template generated by Visual Studio 2013

I've set up a new ASP.NET MVC project using the latest Bootstrap 3 template, but I'm encountering an issue. There doesn't seem to be any spacing between the header navbar and the content displayed below by Renderbody(). I've attempted t ...

htmlcsstwitter-bootstraptwitter-bootstrap-3visual-studio-2013

Move the menu position in Bootstrap 4 navbar

<div class="fixed-top"> <div class="collapse" id="navbarToggleExternalContent"> <div class="bg-dark p-4"> <h5 class="text-white h4">Hidden content</h5> <span class="text-muted">Toggleable via the ...

htmlcssbootstrap-4

Tips on how to connect with ngFor

I have been working on an application to display various events, but I am encountering an issue. Whenever I load the webpage, it appears empty and the console throws an error saying 'Can't bind to 'ngForEvent' since it isn't a know ...

htmlangularevents

React Card with Overflowing TableCell Texts

I am facing an issue with a table inside a table card where the TableCell is overflowing horizontally when the word is too long. How can I break it to the next line? Please refer to the "code" section for details. For more information, please visit my cod ...

cssreactjsmaterial-uijss

The header menu is not appearing on the gray bar in Internet Explorer

Having some issues with IE8, specifically on the website . The website header is not displaying correctly in IE8, but it works fine in Chrome and Firefox. Another issue is that the white area of the site is not 960px width as intended... ...

htmlcss

Unable to wrap the strings from the database in a span element

I have a challenge where I need to enclose the first and last strings that represent the title and price of a product within a div using a span tag. These strings are dynamic, sourced from a database, and differ for each product. I have attempted to use th ...

javascripthtmljquerywrapper

`The logo does not dim when the popup is displayed`

I'm currently experiencing an issue with pop-ups on my page - when they appear, they create a shade over all elements of the page except for my two logos and are displayed with a border around them. Here's what my page looks like before the popu ...

javascriptcssreactjsimagepopup

HTML/CSS: Maintain Hover-Over Pop Up Boxes in Position Until Another Element is Hovered Over

Seeking HTML code to maintain a hover-over pop-up box in position on an image map until another section of the image map is hovered over. For example, refer to my code below - when hovering over a country on the map, a pop-up box with information about a ...

htmlcss

Mastering CSS Sprites: A Guide to Aligning Sprite Buttons at the Bottom

In my web app, I have a bottom navigation bar with 9 buttons, each represented by a Sprite Image having 3 different states. The challenge I'm facing is aligning all the images at the bottom of the nav bar or div. The icons vary slightly in size, and ...

htmlcsscss-spritessprite

"Troubleshooting problems with jQuery accordion collapse and styling using CSS

I'm currently dealing with an issue regarding my accordion design. I have customized the stylesheet using themeroller, but when I collapse one of the sections, the header changes to black instead of reverting back to its original red color. I've ...

jquerycssaccordion

Tips for aligning the elements in the navigation bar in the center

I am faced with a dilemma regarding my navbar design. Here is an image of my current navbar layout: I am attempting to align the components within the navbar to resemble the following design: Here is the HTML code I am using: <!-- Navbar --> < ...

htmlcsslaravelbootstrap-4navbar

The <a> tag with href attribute is mistakenly identified as an external link when used in conjunction with the <base> tag

I am currently working with jQuery UI tabs using jquery 1.11.1 and jQuery ui 1.11.1. Within the <base> tag in the head>, I have the following: <base href="http://mytestdomain.com/" /> Upon loading the page, jQuery UI creates two tabs from ...

jqueryhtmlajaxjquery-uijquery-ui-tabs

Having trouble with CSS Transition functionality not functioning properly

I have set up a temporary page with a two-word message in the h1 tag. The h1 has a CSS3 infinite transition for shadow animation. The shadow is visible on all sides, but it does not transition smoothly. The shadow changes abruptly at regular intervals. I ...

htmlcss

Secondary menu

Is there a way to create a sub navigation menu that only changes once I click a link in the main navigation bar, without refreshing the entire page? Any help would be greatly appreciated. http://jsfiddle.net/qrn8Q/ Thank you. HTML Code: <header ...

htmlcssnavigation

Changing the color of a progress bar in Bootstrap based on a specific percentage level

var elem = document.getElementById("progress-bar"); var progress = 75; elem.style.width = 80 + '%'; if (progress > 80) { elem.style.background = "red"; } #myProgress { height: 5px; } #progress-bar { w ...

javascripthtmlcsstwitter-bootstrapprogress-bar

Ensure that the remaining space on the page is filled by utilizing 2 divs

I am currently in the process of developing a website that needs to be responsive on all pages. The layout consists of 5 divs positioned horizontally. The three middle divs have fixed sizes - 200px, 400px, and 200px respectively. However, I am facing a cha ...

csshtmlscreenfill