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
}
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>
Is there a way to make the cancel and save buttons in the dialog window take up the entire available space? If anyone has any suggestions on how to achieve this, please let me know! ...
I'm having trouble displaying the Google page in my popup. When I try to load it, I get a message in the iframe saying 'www.google.com refused to connect' App.js import React from 'react'; import Popup from './components/Pop ...
https://i.stack.imgur.com/eSODL.png Looking for a solution regarding the mat-input field <mat-form-field> <input class='formulaInput' matInput [(ngModel)]='mathFormulaInput'> </mat-form-field> The blue backg ...
Currently, I am in the process of designing a website with three main divs all on one page. To visually separate these divs, I have included a subtle horizontal line. The horizontal line between the first and second div looks correct as intended. However ...
Since updating the bootstrap version in my application from 3.3.6 to 4, I've been encountering an error stating that $(...).modal is not a function. This was previously working fine before the update. angular.js:14700 TypeError: $(...).modal is n ...
When setting the height of my boxes to match the height of my <nav>, I encountered overflow issues. Despite using a 10rem height for the nav and a 2.25rem font, calculating the padding as 10-2.25/2 didn't result in the desired outcome. Can someo ...
I have a div <div id="page"> </div> Containing the following css code: #page { background: url('images/white-zigzag.png') repeat-x; } @media (max-width: 600px) { #page { background: url('images/white-zi ...
I'm currently working on integrating the React Native <ListView /> component with the <List /> and <ListItem /> components from React Native Elements. However, I seem to be facing an issue where the <ListItem /> component is no ...
I've developed a web application with a basic login box, utilizing jQuery AJAX for the login process. However, I'm facing an issue with prompting the browser to remember the password. How can I trigger the "Do you want the browser to remember th ...
Having trouble using both react-helmet and styled-component in conjunction with next.js. The next.js examples demonstrate utilizing each package in separate repositories. Does anyone know how to resolve this issue? ...
Can I make the old div change its position and move to the side when I add a new div? And can all the old divs be hidden when adding four new divs? This is for my full news website and I want this applied to all four pages. First page: More pages: 2 pag ...
Oops! Runtime Error Alert: The initial UI does not match what was rendered on the server. Warning: Make sure the server HTML includes a matching <div> tag! For more details, click here: https://nextjs.org/docs/messages/react-hydration-error Compon ...
<TextField name="BalDueDate" format="MM/dd/yyyy" value={basicDetails.BalDueDate.slice(0,10)} onChange={event => { ...
I am looking to design a menu where all the menu items are aligned at the bottom, even if they span across multiple lines. ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: ...
I am looking to implement a hidden notes functionality in my web application. When the "hide note" button is clicked, I want the note to be removed from its current location and added to a hidden notes section. Users should then have the ability to view an ...
I've been utilizing the power of create-react-app to create my react.js project. Whenever I use the command npm run build, it automatically integrates a service-worker for progressive web app functionality in the production build. Everything was runn ...
Attempting to click a button on a webpage with the given HTML code: <html lang="en" webdriver="true"> <head> <body class="scbody" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAKCAYAAAB10jRKAAAAGXRFWHRTb2 ...
I am facing an issue with my code while using Quasar (Vue 3.0). The code snippet in question is: <q-select filled v-model="model" :options="options" label="Filled" /> When the drop-down menu is open and I scroll the pag ...
Is there a way to change the color of a snackbar in material-ui without creating a new one for each color? It seems that the example sandbox only has one color, while the others are static. ...
Managing users and todos can be a complex task. You may want to view all todos from all users, then easily access the information of the user who created a specific todo. Similarly, you might also want to view past todos of a particular user. What is the ...