I am using ReactJS create-react-app to build a website. I'm trying to center an image on my homepage horizontally across the screen using css, but it is remaining aligned left.
I have the .jpg being imported into a .js file with a class declaration and it appears on the page but it doesn't follow the class modifications I am making in my index.css file.
//in Cur.js file
import React from 'react';
import Image from 'react-image-resizer';
import cur from './cur.jpg';
function Cur() {
return (
<div>
<Image
img src={cur} alt="cur" class="center"
height={350}
width={700}
/>
</div>
);
}
export default Cur;
//in index.css file
.center{
text-align: center;
display: block;
justify-content: center;
align-items: center;
margin: auto;
width: 100%;
}
<Image
img src={cur} alt="cur"
height={350}
width={700}
style={{ alignSelf: 'center' }}
/>
You may separate the inline style, or use styled-components instead
Set a class name for the div eg. className="container-div"
And style it in your css style sheet.
.container-div{
display: flex;
height: 100vh;
width: 100vw;
align-items: center;
justify-content: center;
}
The height and width properties will ensure your container covers the whole screen .
try this.. the property is called className not class
import React from 'react';
import Image from 'react-image-resizer';
import from "index.css"
import cur from './cur.jpg';
function Cur() {
return (
<div>
<Image
img src={cur} alt="cur" class="center"
height={350}
width={700}
/>
</div>
);
}
export default Cur;
html:
<div className="image-container">
<img src={logo} alt="logo"/>
</div>
css file:
.image-container {
display: flex;
justify-content: center;
align-items: center;
}
React uses className instead of class.
Change
img src={cur} alt="cur" class="center"
to
img src={cur} alt="cur" className="center"
my problem was missing display: flex in my css styles. adding it to the rest of styles, solved my problem.
In parent div css add:
.parent {
display: flex;
justify-content: center;
}
This will center your image.
import React from 'react';
import Image from 'react-image-resizer';
import cur from './cur.jpg';
function Cur() {
return (
<div>
<Image src={cur} alt="cur" className="center"/>
</div>
);
}
export default Cur;
body,html{
height:100%,
min-height:100%
}
.center{
text-align:center;//for texts
height:100%;
display:flex;
align-items:center;
justify-content:center;
}
Related
Can you please help me with why this is not working. I have tried every possible way and still not get why it is not showing on the screen. Only the commented out inside the div work however what i want is a backgroundImage.
import React from "react";
import styles from "./Carosel.module.css";
import legend from "../carousel-photos/legend.jpg";
import legend1 from "../carousel-photos/legend2.jpeg";
function Carousel() {
return (
<div className={styles.carousel}>
<div
className={styles.carouselInner}
styles={{
backgroundImage: `url(${legend})`,
}}
>
{/* <img src={images[0].img} /> */}
</div>
</div>
);
}
export default Carousel;
.carousel {
width: 60%;
height: 700px;
/* background-color: black; */
}
.carouselInner {
height: 100%;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
}
This is how I put my folder directory looks like
I have a two basic div containers and I am trying to apply some styles to it. I do import my CSS styles from a separate .module.css file and the first style gets picked up in the className property, when assigned. However, the same thing is not working for the second div. The css property for class 'sales' is not being picked up
dashboard.js
import HomeSalesmanStyles from '../../../styles/SalesmanHome.module.css';
const HomeSalesman = ({name}) => {
return(
<>
<div className={HomeSalesmanStyles.container}>
<h4>
Hello, {name} 👋
</h4>
</div>
<div className={HomeSalesmanStyles.sales}>
Hello
</div>
</>
)
};
export default HomeSalesman;
SalesmanHome.module.css
.container {
display: flex;
justify-content: center;
margin-top: 5%;
};
.sales {
display: flex;
justify-content: center;
width: 100px;
background-color: red;
}
Any ideas where the issue is?
----------- Edit ------------
The issue was wrong css module name import! After correcting to the right file, everything works.
This looks like a syntax error in the CSS: adding a semicolon after a rule is invalid.
.container {
display: flex;
justify-content: center;
margin-top: 5%;
} /* <- no semicolon */
.sales {
display: flex;
justify-content: center;
width: 100px;
background-color: red;
}
<div class="container">
<h4>
Hello, {name} 👋
</h4>
</div>
<div class="sales">
Hello
</div>
So I was designing a web app using React and I'm stuck on this issue. Given below is what is being rendered
As I've highlighted using the red rectangle, there is a cut off region in my footer component. I'm not sure what is causing this. The CSS and Component code is as given below
import styled from 'styled-components';
export const Background = styled.section`
background: black`;
export const Column = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
margin-right: 50px;
margin-top: 50px;`;
export const Row = styled.div`
display: flex;
flex-direction: row;
justify-content: center;`;
export const Text = styled.h1`
font-size: 1.5em;
text-align: center;
color: palevioletred;
`;
Footer Component
import React from 'react';
import { Column, Row, Background, Text } from './FooterStyles';
function Footer(props) {
return (
<div>
<Background>
<Row>
<Column>
<Text><h1>Developed By</h1></Text>
<h3>Erwin Smith</h3>
<h3>Peter Jackson</h3>
<h3>Tommy</h3>
</Column>
<Column>
<h1>About US</h1>
</Column>
</Row>
</Background>
</div>
)
}
export default Footer;
A solution to work around this issue is much appreciated.
If you r using bootstrap try creating a custom class with margin-left,right -15px n overflow-x: hidden to body
The defaults properties and values for a body tag are:
body { display : block; margin : 8px; }
so I think you should set that margin to 0.
this is just my guess because you haven't provided so much information and this is all I can say.
I create two components in React, and I want to display them both on the App component.
While they do show on the page, I can't use CSS to give each of them flex for example.
I want each component to take half of the screen size, this is what I have:
import "./App.css";
function App() {
return (
<div className="App">
<TopJourney id="Top-journey-section" />
<JourneysSection id="Journeys-section" />
</div>
);
}
export default App;
This is the App.css:
.App {
text-align: center;
display: flex;
flex-direction: column;
}
#Top-journey-section {
flex: 1;
}
#Journeys-section {
flex: 1;
background-color: greenyellow; // I added this just to be sure that the css does not work.
}
What is going wrong here?
You are passing id as a prop to your component, but you are not using it.
Wrong:
<TopJourney id="Top-journey-section" />
Good:
function TopJourney({id}) {
<div id={id}>your component stuff</div>
}
Your selectors id or className only works on native HTML elements, not on Components, try adding styles on HTML dom elements instead. For components, these are just regular props that you can use within the component.
This is a confusion of css flexbox column and row. it should be row and change the id into className, then.... change the css file as well below.
import "./App.css";
function App() {
return (
<div className="App">
<TopJourney className="Top-journey-section" />
<JourneysSection className="Journeys-section" />
</div>
);
}
export default App;
CSS file should be looks like this
.App {
text-align: center;
display: flex;
flex-direction: row;
width:100%;
}
.Top-journey-section {
width:50%;
}
.Journeys-section {
width:50%;
background-color: greenyellow; // I added this just to be sure that the css does not work.
}
I import the styles to the component like below. Up: It's a React component with a postcss-loader in Webpack.
import styles from './index.scss';
This is a gist from the component:
<div className={styles['container']}>
<Row type='flex' align='middle' justify='space-between'>
<Col span={24}>
... ...
</Col>
</Row>
</div>
This is the styles:
.container {
margin-left: 24px;
& .ant-row-flex.ant-row-flex-space-between.ant-row-flex-middle {
height: 100%;
display: flex;
& .ant-col-24 {
display: flex;
align-items: center;
}
}
}
Only the .container's margin-left: 24px; gets displayed in the component.
How to get .ant-row-flex.ant-row-flex-space-between.ant-row-flex-middle from Row and .ant-col-24 from Col to display too?