My SVG icon is currently aligned to the left, but I want to center it. I tried using the following code, but it doesn't seem to be working:
.parent{
display: flex;
align-items: center;
font-size: 13px;
}
span{
margin-right:10px
}
https://i.sstatic.net/HlXml.png
When I look at the SVG icon, it's still not centered.
I also tried using flex like this:
svg{
display: flex;
align-items: center;
justify-content:center;
}
I even attempted to use text-align:center, but that didn't work either.
align-items: center is used to vertically center align all children.
justify-content:center horizontally center aligns all children.
body {
font-size: 5em;
font-family: 'Segoe UI', sans-serif;
}
svg {
height: 1em;
/* You can add a vertical offset if needed */
transform: translateY(1%);
}
.parent {
display: flex;
align-items: center;
justify-content: center;
}
span {
margin-right: 10px
}<div class="parent">
<span>
Example text
</span>
<svg class="icon icon-home" id="icon-home" viewBox="0 0 34 48">
<path d="M33.16,28.12h-5.2v13h-3.44v-16.72l-7.72-8.72l-7.72,8.72v16.72h-3.44v-13h-5.24l16.4-17.4Z"></path>
</svg>
</div>If your icon isn't aligned as desired, you can adjust the alignment by using transform: translateY(X%). The visual alignment also depends on the svg's viewBox.
No flex properties are necessary for your icon – they won't affect svg child elements in terms of layout.
For more information, check out: css-tricks: A Complete Guide to Flexbox
To center-align vertically, simply apply the vertical-align: middle CSS style property. This will ensure the SVG is aligned perfectly in the center of its container.
Start by giving your css classes new names There is no sign of the .main class in the element you inspected
I believe the most effective approach would be to introduce a parent element for your SVG and have it manage the positioning
For instance :
CSS
.parent-container {
display:flex;
justify-content:center;
align-items:center;
}
HTML
<div class="row">
<p>Text</p>
<div class="parent-container">
<svg />
</div>
I recently set up a nextjs/react static website with Github Actions, but I'm not very familiar with how they work. I created a new branch from the main branch, made some changes, committed them, and then merged the branch back into the main branch. Ho ...
Currently, I am in the process of developing a messenger application and facing an issue where my messages are not ignoring HTML tags. This is happening because I directly paste the input text into the innerHTML of the message. The code snippet responsible ...
https://i.sstatic.net/JuueZ.pngWhenever I attempt to build a project or run the yarn tsc command, I encounter various types of errors. This seems to be due to them being installed in the incorrect location. But what could be causing this issue? Feel free ...
Check out this link :http://jsfiddle.net/mishragaurav31/ang58fcL/#base I created two groups of objects; one consisting of a circle and text, and the other with two images. When I try to change attributes for group 1, it works fine. However, when attempt ...
<html> <head> <title></title> <style type="text/css"> body { font-family: tahoma; } h2 { font-weight: bold; border-bottom: 2px solid gray; margin-bottom: 10px; } #dat ...
<button class="css-obkt16-button" type="button"><span class="css-1mhnkuh">Download CSV</span></button> I'm attempting to select the highlighted 'Download CSV' button https://i.sstatic.net/SThoW.png with the HTML code ...
I am currently exploring how to efficiently cancel multiple tasks of the same action type within redux-saga. During the componentWillUnmount() lifecycle method of my component, I aim to terminate any ongoing tasks that were initiated. Consider the followi ...
How do I clear the 'city' field when clicking the 'Get Weather' button? Also, why do I need to click the button twice to get the correct 'time'? View Image Code Link: Project Link ...
I'm having trouble implementing the -webkit-filter: blur() property. I tried using "filter" instead, but it still isn't working. Could this be a limitation of Vue.js or are there any other solutions available? <template> <div class=&qu ...
Having an issue where when sending multiple data with axios, the image in formdata does not send. However, when I only send the formdata it works fine. If anyone knows how to successfully send multiple data in axios, please provide a solution. const onS ...
I encountered an issue when working with APIPlatform and React. I am trying to send an email using Symfony mailer and custom operations. Below are all the pages involved in implementing this feature: <?php namespace App\Controller; use App\ ...
My Navbar is collapsing correctly, but when I click the toggle icon after it's collapsed, the items appear in a horizontal row instead of the intended vertical block. I have checked the code on the Bootstrap 5 example page and tried to replicate it, b ...
Here's a question that requires some logical thinking rather than technical expertise. I've created a design where the header and footer are always fixed at the top and bottom of the window, respectively. However, the elements inside have percen ...
Here is the design that I aim to incorporate into my mobile application: Here is the progress made towards implementing it: Implemented design While following some online examples, I managed to curve the picture, but it ended up curved on both ends inst ...
I am unable to modify the HTML code, but I need to find a way to hide the link (#wall). <td class="status_value"><span class="online"> - <a href="#wall"> Leave a Comment </a> <a href="#today"> ...
Is there a way to redirect a website user back to the login page if they try to access a secure page without logging in first? I'm looking to implement this using JavaScript and cookies. Any suggestions or ideas on how to achieve this seamlessly for t ...
For my master's degree project, I am working on developing a shopping web app. The issue I am facing is that I need assistance with creating a div and adding it to the HTML file with an ID matching the category name from the .ts file when the addCate ...
I successfully found the element using the xpath copied directly from the code. Can someone assist me in creating a simpler xpath for the following code snippet, which is fully functional! WebElement oCheckbox = myDriver.findElement(By.xpath(".//*[@id=&ap ...
My CustomField has a FormLayout inside, and I want to change the #layout element within the shadow-root. While it can be done with JavaScript: document.querySelector("#myid > vaadin-form-layout") .shadowRoot .querySelector("#layout" ...
Currently, I am making a call to one API using another API. The first API contains a list structured like this: { "body": [ { "label": "label one", "inputVal": "input value o ...