I am encountering a problem where I cannot seem to center an SVG within a div of 900px width. The SVG itself is only 400px wide, and I have set its margin-left and margin-right properties to auto. However, the centering does not work as expected - it behaves as if the left margin is at its default value of 0.
Could someone help me identify what might be causing this issue?
SVG is typically displayed inline.
To center it, add display: block and then apply margin: auto.
If your layout requires SVG to remain inline, you can achieve centering by setting text-align: center on a parent element.
Alternatively, flex or grid layouts on the parent element can also be used to center the SVG.
Previous solutions didn't resolve my issue.
I found that including the parameter preserveAspectRatio="xMidYMin" in the <svg> element did the trick. Additionally, specifying the viewBox attribute is necessary for this to be effective.
Reference: Example website
After learning that svg is typically inline, I decided to experiment by including the following snippet in my div element:
<div style="text-align:center;">
To my surprise, it worked like a charm for me.
Some may argue against this practice, claiming that images should not be centered using HTML and CSS. However, considering the complexities of centering elements in web development, I think this approach is completely justified.
Utilizing Flexbox is an alternative method: incorporate
.element {
display: flex;
justify-content: center;
}Then, apply the .element class to the container that encloses your SVG graphic.
After trying all the suggested solutions without success, I found a different approach that worked for me.
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
It seems that the answers above may be lacking in completeness as they focus primarily on CSS aspects.
The positioning of an SVG within the viewport is influenced by two key attributes:
For a more detailed explanation, you can visit this link on CodePen.
<svg viewBox="70 160 800 190" preserveAspectRatio="xMaxYMax meet">
I was required to implement
display: inline-block;
To center the SVG item within a flex container, you can apply the following CSS:
<div class='icon'>
<svg>.....</svg>
</div>
.icon{
display:flex;
align-items:center;
justify-content:center;
}
Ensure that your CSS is as follows:
margin: 0 auto;
Even if you are specifying that the left and right margins should be set to auto, there could still be an issue. However, it's hard for us to pinpoint without seeing the actual code.
Make sure to place the following code inside your style.css file within the designated div class.
display: block;
margin: auto;
After implementing this change, execute the code to witness the alignment of the svg element at the center.
You may also accomplish this by following these steps:
<center>
<div style="width: 40px; height: 40px;">
<svg class="sqs-svg-icon--social" viewBox="0 0 64 64">
<use class="sqs-use--icon" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#twitter-icon">
<svg id="twitter-icon" viewBox="0 0 64 64" width="100%" height="100%">
<path
d="M48,22.1c-1.2,0.5-2.4,0.9-3.8,1c1.4-0.8,2.4-2.1,2.9-3.6c-1.3,0.8-2.7,1.3-4.2,1.6 C41.7,19.8,40,19,38.2,19c-3.6,0-6.6,2.9-6.6,6.6c0,0.5,0.1,1,0.2,1.5c-5.5-0.3-10.3-2.9-13.5-6.9c-0.6,1-0.9,2.1-0.9,3.3 c0,2.3,1.2,4.3,2.9,5.5c-1.1,0-2.1-0.3-3-0.8c0,0,0,0.1,0,0.1c0,3.2,2.3,5.8,5.3,6.4c-0.6,0.1-1.1,0.2-1.7,0.2c-0.4,0-0.8,0-1.2-0.1 c0.8,2.6,3.3,4.5,6.1,4.6c-2.2,1.8-5.1,2.8-8.2,2.8c-0.5,0-1.1,0-1.6-0.1c2.9,1.9,6.4,2.9,10.1,2.9c12.1,0,18.7-10,18.7-18.7 c0-0.3,0-0.6,0-0.8C46,24.5,47.1,23.4,48,22.1z"
/>
</svg>
</use>
</svg>
</div>
</center>HTML and CSS:
<div class="centered-wrap"&rt;
<svg width="20px"></svg>
</div>
.centered-wrap {
display: flex;
justify-content: center;
align-items: center;
}
To solve my issue, I inserted the CSS property margin: 0 auto; within the element that holds the <svg>.
Here's how I did it:
<div style="margin: 0 auto">
<svg ...</svg>
</div>
Unfortunately, none of the previously suggested solutions resolved my issue. For those working with SVGs from Google Icons, give this a try:
display: inline-block;
width: 24px;
vertical-align: middle;
Insert your code within this block if you are utilizing bootstrap:
<div class="text-center ">
<i class="fa fa-twitter" style="font-size:36px "></i>
<i class="fa fa-pinterest" style="font-size:36px"></i>
<i class="fa fa-dribbble" style="font-size:36px"></i>
<i class="fa fa-instagram" style="font-size:36px"></i>
</div>
Appreciate the input, just wanted to mention that you have the option to utilize pixels (px) instead of percentages (%) as well.
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
<div align="center">
/* svg code */
</div>
This snippet centers an SVG within a div container.
When attempting to post data directly using templateDrivenForm and retrieve data from Firebase, I encountered the following type error message. Here are the relevant parts of my code: // Posting data directly using submitButton from templateDrivenForm onC ...
My issue is with the development of my website. When I access it on my PC, everything looks fine. However, when I try to visit the site on my iPhone, there is a noticeable difference in the output. The space above the navigation bar appears differently whe ...
Some questions I have: 1. Logo Placement: I'm having trouble placing my logo on the top left side of my navigation bar without making too many changes to the code. Any suggestions? 2. Screen Resolution Discrepancy: I've noticed that my website lo ...
Can you style a font with CSS in a JavaFX application? I have an FXML scene and corresponding CSS file. In Java code, you can set a font using the setFont method: text.setFont(Font.loadFont("file:resources/fonts/SourceSansPro-Bold.ttf", 12)); I've t ...
While working on an auto-fill grid that moves elements to the next line when the width reaches 800px, I encountered an issue with my text inside the grid not stretching. https://i.sstatic.net/OeJ3I.png Below is my CSS code: ul { display: grid; ...
During a recent collaboration with fellow designers, they shared some CSS animation examples from CodePen that needed to be integrated into our current project. The animations ranged from simple to complex, like the following: * { margin: 0; padding ...
I need to modify the color property of a common component so I can use it elsewhere. const ViewAllIcon = (props) => ( <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 26 ...
I am currently attempting to implement a CSS stylesheet to modify the properties of my GTK/C application. Within a dialog, there is a GtkToolBar containing GtkToggleToolButtons. My goal is to have the text on these buttons appear in different colors. In t ...
When a user clicks on a thumbnail, I aim to display the full-size image in a div. To achieve this, I want to determine the original size of the image based on its source URL before it loads, allowing me to set the appropriate dimensions for the container. ...
Trying to create a dropdown menu with various options and colors. Managed to set background colors for each option, but once an option is selected, the background color disappears. Is there a way to fix this issue? See my HTML example below: <select> ...
Currently, I am excited about incorporating CSS styling based on taxonomy terms, particularly for the body tag where I aim to include the current terms. Here is my progress so far : function _phptemplate_variables($hook, $vars = array()) { global $no ...
Goal: The aim is to design two divs positioned side by side on a webpage, covering the entire width of the page. This should be achieved using the latest versions of react + Material UI. The div on the left should have a fixed width of 200px. While the ...
I am experimenting with styling my textarea using a combination of JAVASCRIPT and CSS. The goal is to make it expand in size from 20px height to 120px height when clicked, using document.getElementById("tweet_area"). However, I am facing an issue where t ...
Is there a way to style the underlying html textarea of a vuetify v-textarea using CSS? I'm trying to customize the line height, font family, color, and more of the v-textarea component. Simply adding a class to it doesn't seem to work: <v-tex ...
https://i.sstatic.net/I2gIZ.jpgI'm currently working on building a video streaming site, but I've hit a roadblock. My challenge right now is figuring out how to make the episode selector change the video player's source. I'm a bit conf ...
My goal is to have an image positioned between two separate div tags similar to a Facebook profile page: https://i.sstatic.net/sBocE.jpg I have tried solutions found here but they didn't work as expected. The image position changes when the screen s ...
Is there a way to trigger a click event only on the image itself, rather than the entire parent div? When setting width and height for the parent div, the click event seems to encompass the entire area. For instance, if the image is 600 pixels wide by 300 ...
I need help with making my HTML5 audio player responsive in Bootstrap. Here is the code I currently have: <div class="col-sm-4 col-sm-offset-4"> <audio controls style="width: 600px;"> <source src="sample.mp3"> < ...
$('.toggle-button').on('click', function() { $('body').addClass('changeCursor'); }); $('.toggle-button.toggle-active').on('click', function() { $('body').removeClass('c ...
After reading the documentation on https://material-ui.com/style/typography/ and loading the Roboto font, I expected a simple component like this: const theme = createMuiTheme(); const App = () => { return ( <MuiThemeProvider theme={theme}> ...