Is there a way to adjust the SVG level so that it aligns with the center of the polygon instead

Looking to align a simple svg icon for a dropdown button with the text in the button so that the centers match up. Currently, the icon is aligned with the bottom of the text instead.

Here's the code for the svg:

<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='#FFFFF'>
    <polygon
            opacity="0.5"
            points='0,0 100,0 50,50'
    />
</svg>

The implementation in React styling looks like this for the button element:

background: `url(${require("./assets/icons/select_downarrow.svg")}) no-repeat`,
backgroundSize: "10px",
backgroundPosition: "calc(100% - 15px) center",

Currently, the icon aligns with the very bottom of the SVG arrow. Is it possible to align it to the center of the polygon directly from the SVG itself, or will it require additional styling?

cssreactjssvg

Answer №1

An effective method is to adjust the line-height of your text to match the height of your image. This approach works well unless your text needs to wrap around the image.

button {
  background-color: #eeeeff;
}

svg {
  display: block;
  float: left;
  background-color: #ffffee;
}

span {
  line-height: 100px;
}
<button>

  <svg width="100" height="100" fill="#FFFFF">
    <polygon opacity="0.5" points="0,0 100,0 50,50" />
  </svg>
  
  <span>Some text here</span>

</button>

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

`Wrong class names within Material UI when using styled components in a react environment`

Utilizing react-frame-component to load a unique custom component designed with both material ui and styled-components. The specific details of the custom component are not crucial, but here is some pertinent code snippet: const StyledCardHeader = styled( ...

reactjsiframematerial-uistyled-components

Starting the download of the canvas featuring a stylish border design

I'm facing an issue where the canvas border is not showing up when I download the canvas with a border. The border appears on the screen, but it doesn't get included in the downloaded canvas. let canvas=qrRef.current.querySelector("canvas&qu ...

javascripthtmlcsscanvas

Tips for maintaining consistent styles in CSS for multiple websites

I am currently working on developing a customizable chatbot widget using react. The goal is to create a chatbot widget that can be easily integrated into any website, similar to the functionality of rasa-webchat. During testing on some websites, I encount ...

htmlcssreactjsmaterial-ui

The challenges of type verification in Redux reducer

I'm currently facing two specific challenges with Typescript and the Redux reducer. Reducer: const defaultState = { selectedLocation: { id: 0, name: 'No Location' }, allLocations: [{ id: 0, name: 'No Location' }], sele ...

reactjstypescriptredux

Position a div relative to another div with a static position

I am attempting to create a site that is fullscreen and responsive, but I am having issues with elements in the container overflowing on smaller screens, causing it to not be 100% as desired. I have tried using: top:100%; position:relative; width:100%; he ...

javascriptjqueryhtmlcss

Tips for quietly printing a PDF document in reactjs?

const pdfURL = "anotherurl.com/document.pdf"; const handleDirectPrint = (e: React.FormEvent) => { e.preventDefault(); const newWin: Window | null = window.open(pdfURL); if (newWin) { newWin.onload = () => ...

javascriptreactjstypescript

Styling a modal popup using session storage in CSS

I recently created a modal popup using CSS by following a helpful tutorial that can be found at this link: Now, I am curious about how to store the value entered in a textbox as session data. I came across some code in another tutorial that demonstrated h ...

javascripthtmlcss

"Troubleshooting the lack of background image display in Next.js when using

Can anyone help me figure out why my background image disappears when I add a linear gradient? It shows up fine without the gradient, but as soon as I include it, the image vanishes. <div className="hero" style={{background: "linear-grad ...

cssreactjsnext.js

Finding out which icon has been clicked in a Material-UI menu can be achieved using various methods

How can I determine which icon was clicked in a material-ui menu when the event.target does not provide values? Check out my code snippet below: <ListItem button id="Dashboard" onClick={handleMenuListClick}> <ListItemIcon> <Dashboard ...

reactjsmaterial-ui

Using jQuery UI to style div elements with dynamic titles

Is it possible to style a standard div container using the same styling as jQuery dialogs? I am looking to create a div panel with text content but with the title bar styling similar to that of jQuery UI dialog boxes. Appreciate your assistance in advance ...

htmlcssjquery-ui

I am looking to fetch information from a different Firestore collection by looping through data using a forEach method within an onSnapshot function

I'm struggling to grasp the concept of rendering data from Firestore in my project. I've searched extensively but haven't been able to find a solution that fits my requirements. Background Information In my Firestore database, I have collec ...

javascriptreactjsfirebasegoogle-cloud-firestore

muiSlider limited to specific range

I am currently using the Mui Slider component for a user interface where I need to restrict its value within a certain range. For example, I want the slider's handle to become unmovable after reaching 50. Users can still select values up to 50, but th ...

javascriptreactjsmaterial-ui

Is it possible to have images automatically resize to fit the content div without becoming distorted?

I have created a webpage that I really enjoy, but now I need to ensure it supports smaller resolutions like 1020X768. However, for those with larger monitors, I want to take advantage of the extra space by setting a minimum width that can grow with the scr ...

jqueryhtmlcss

The onload event for embedding SVG files is not functioning as expected

I created an angular directive: <div> <embed ng-src="{{url}}" id="map" type="image/svg+xml/> </div> I am trying to trigger a function when the svg is fully loaded. To achieve this, I have added an onload action listener durin ...

javascripthtmlangularjssvg

The State Hook error "state variable is not defined" arises due to an issue with the state declaration in

function Header() { const [keys, setKeys] = useState([]); //custom addition const first = (e) => { var result = new Map() axios.post('http://localhost:8000/' + query) .then(function(response){ var content ...

javascriptreactjs

Setting the value for KeyboardDatePicker is a simple process that involves selecting a date

In my form, I am using a material ui KeyboardDatePicker and would like to set the default value based on the response object from Json. Here is how I have implemented it: const handleDateChange = (date) => { console.log(date); setSelectedDate(d ...

reactjsdatepickermaterial-uidatetimepickerreact-datepicker

Seeking advice on creating a project design for OAuth implementation (Frontend in React, Backend in FastAPI)

I am currently developing a single-page application frontend in React that interacts with a Python FastAPI backend. To handle user authentication, I have implemented the client-side Authorization Code flow with PKCE (OAuth2.0) for users to authenticate the ...

reactjsoauth-2.0authorizationbackendfastapi

What is the process of declaring a react-icons icon in TypeScript?

Having a dilemma with declaring the icon in my array that contains name and icon. export const SidebarMenuList: SidebarMenu[] = [ { name: "Discover", icon: <AiOutlineHome />, id: SidebarCategory.Discover, }, ] The SidebarMe ...

reactjstypescript

IE11 Error: Script1003 expected but not found

I'm in the process of adding IE11 support, but encountering the following errors: SCRIPT1003: Expected ':' File: vendor.bundle.js, Line: 8699, Column: 8 SCRIPT5009: 'webpackJsonp' is undefined File: app.bundle.js, Line: 1, Colum ...

javascriptreactjswebpackinternet-explorer-11babeljs

Is there a way to adjust only the height of a responsive image?

Increasing the Height of an Image on a Mobile Device! I have an image that displays as the header of my website. When I resize the window to mobile format, the image resizes too. However, I want the height of the header image to be longer! Is this possibl ...

csshtml