score:0
Accepted answer
in order for the justifycontent
property to work, you first need to set to make it a flex container. also, to have your items evenly spaced, instead of space-between
, use the below:
const flexstyle = {
display: 'flex',
position: 'absolute',
zindex: 1,
margin: 20,
justifycontent: 'space-evenly',
alignitems: 'center'
};
in addition to the above, i noticed that that the container is absolutely positioned. adding a width
of 100%
will do the trick for you.
score:0
this is not related to react, you need to specify the width
of the absolute
element.
.flex-container {
display: flex;
position: absolute;
z-index: 1;
width: 100%;
justify-content: space-between;
align-items: center
}
.labelstyle {
padding: .5em 1em;
background-color: yellow;
}
<div class="flex-container">
<label class="labelstyle">
data
</label>
<label class="labelstyle">
moreinfo
</label>
<label class="labelstyle">
interestingmessage
</label>
</div>
Source: stackoverflow.com
Related Query
- Positioning a series labels across the screen
- react-native - Fit Image in containing View, not the whole screen size
- How to Position a React Native Button at the bottom of my screen to work on multiple ios devices
- How to make the dev tools not show up on screen by default in Electron?
- How to fix the white screen after build with create-react-app?
- React-Bootstrap Rows/Columns are not the full width of the screen (Only 50% of it)
- How to create shared-singleton components across all the platform?
- React-Native: Show loading screen till the webview is loaded
- Center a text in the screen with react native
- UI doesn't update until tap on the screen when setState is called inside a realm listener callback
- Get the current active screen route of the tab navigator in react navigation
- How can we use the same state across multiple tabs (pages)?
- How to handle exit app in one screen not in the whole app - React Native?
- Handling the screen orientation change in ReactJS
- Change the background color of a screen with react native
- Change series data dynamically in react-highcharts without re-render of the chart
- How to add floating action button on the right-bottom side of the screen using material ui in react
- React Router V4: How to render a modal in the same screen changing only the url and then with that url, be able to rebuild the whole screen
- react-native:Show spinner at the center of the screen
- How to use antd divider to separate two sides of the screen in a react component?
- How do I fix the position of an input so it's always below an element that's centered on the screen but its size can change?
- How to make the background color of an app cover the entire screen (using style) in React Native?
- Failed propType: The prop `id` is required to make `Dropdown` accessible for users of assistive technologies such as screen readers
- Deck.gl (Mapbox) StaticMap doesn't resize - overwrites everything on the screen
- How do I show the Google passport oAuth consent screen in the react frontend, not with express views template
- Make a React Material-UI component to stick to the bottom-right of the screen
- Text is not wrapping and is getting of the screen react native
- How to maintain the state of React/Redux application across page refreshes?
- How to get bootstrap card to stay in the middle of the screen in reactjs
- How to pop to the previous screen with params?
More Query from same tag
- React-Router's Link-To updates the URL but doesn't refresh page
- auth0 - invalid user_metadata type
- How can I scroll right when inserting a character in draft js?
- Pause html video when going out of viewport reactjs
- Refresh page when localStorage is deleted
- Cannot read property 'map' of undefined in ReactJS
- Change element type on change detected in React
- Not able to render todoItems
- it can't read property 'id' of undefined but I have some values in it, and don't why it should be unknown
- Product id already selected to delete but the product data is still on Firebase
- React JS Invariant Violation
- How to declare a variable before assign it in React using Typescript without "Index signature is missing in type" Error
- How to setState only when "map" loop is finished?
- Get value from e.target.name and use in react hooks setState
- How to programatically navigate from an action creator using react-router v4?
- Reactjs passing methods as props to child
- What type of navigation in React works well with login authentication?
- Why is my React component staying a step behind?
- How to handle multiple environments in React app
- Reactjs - Ordering div when resized
- Store geolocation coordinates as a const variable react
- TypeError: Cannot read property 'group' of undefined
- map() as a callback in setState() in React running the conditional twice oddly
- issue on calling axios in reactJs
- Mapping array of images leads to the same image repeating on every instance
- Use a child's method in a parent component
- CSS Module composition
- How to get CSV data using Reactjs and store into state?
- Favicon doesn't show in the browser
- mui-datatables custom header with multiple buttons position