I am trying to vertically align two set of rows, each of which contains an image on one side, and text on the other side. Although I have experience with using flex to align vertically by using the code below, seems like in this particular situation I have to use something different:
justify-content: center;
flex-direction: column;
text-align: center;
This is what I am trying to achieve (Note that the red box is the image while the gray box is the text):
However, I am getting the situation below, with the text not vertically centered but top aligned with the image:
This is how the DOM structure looks like (ReactJS):
<LandingPinkDiv>
<Grid container spacing={24}>
<Grid item xs={12}>
<LandingTitleWhite>Title</LandingTitleWhite>
</Grid>
<LandingRowDiv>
<Grid item xs={6}>
<LandingImageDiv>
<LandingImage
src={1}
width="320px"
height="304px"
/>
</LandingImageDiv>
</Grid>
<Grid item xs={6}>
<LandingTextContainer>
<LandingSubheadingWhite>
Subheading
</LandingSubheadingWhite>
<LandingSubtitleBlack>
SubTitle
</LandingSubtitleBlack>
</LandingTextContainer>
</Grid>
</LandingRowDiv>
<LandingRowDiv>
<Grid item xs={6}>
<LandingTextContainer>
<LandingSubheadingWhite>
SubHeading
</LandingSubheadingWhite>
<LandingSubtitleBlack>
Subtitle
</LandingSubtitleBlack>
</LandingTextContainer>
</Grid>
<Grid item xs={6}>
<LandingImageDiv>
<LandingImage
src={2}
width="320px"
height="197px"
/>
</LandingImageDiv>
</Grid>
</LandingRowDiv>
</Grid>
</LandingPinkDiv>
The CSS counterpart is like this:
export const LandingRowDiv = styled.div`
display: flex;
/* justify-content: center;
flex-direction: column;
text-align: center; */
margin-bottom: 10%;
padding-left: 10%;
padding-right: 10%;
`;
export const LandingPinkDiv = styled.div`
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
height: 170vh;
background: #e72564 !important;
`;
export const LandingTextContainer = styled.div`
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
margin-right: 10%;
`;
You need to add align-items: center to your LandingRowDiv styled component:
export const LandingRowDiv = styled.div`
align-items: center;
display: flex;
justify-content: center;
flex-direction: row;
text-align: center
margin-bottom: 10%;
padding-left: 10%;
padding-right: 10%;
`;
You should use align-items: center; in 'LandingRowDiv' styled-component.
Not sure I get it right but you could consider the following html
<figure>
<img src="" alt="">
<figcaption>
<p>Text</p>
</figcaption>
</figure>
And then the following css
figure {
display: flex;
width: 100%;
}
figure img {
width: 50%;
}
figure figcaption {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
}
(you can use align-self on p instead of align-items)
Related
I am creating an image slider in React. I'm using Material UI arrow icons as the left and right buttons.
Everything is working fine until I try and add padding.
Before adding the padding, I can see two white circles with my arrows. As soon as I add the padding, the white circles get bigger but the arrows inside disappear.
return (
<div className="container">
<div
className="slider"
style={{ transform: `translateX(-${currentSlide * 100}vw)` }}
>
<img src={images[0]} alt="" />
<img src={images[1]} alt="" />
<img src={images[2]} alt="" />
<img src={images[3]} alt="" />
</div>
<div className="arrows">
<KeyboardArrowLeftOutlinedIcon className="arrow" onClick={prevSlide} />
<KeyboardArrowRightOutlinedIcon className="arrow" onClick={nextSlide} />
</div>
</div>
)
And this is the sass file:
.container {
width: 100vw;
height: 60vh;
overflow: hidden;
position: relative;
.slider {
width: 400vw;
height: 100%;
display: flex;
transition: all 1s ease;
img {
width: 100vw;
height: 100%;
object-fit: cover;
}
}
.arrows {
position: absolute;
height: 100%;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
gap: 80%;
top: 0;
.arrow {
cursor: pointer;
background-color: white;
border-radius: 2em;
padding: 1em;
}
}
}
It seems that a possible solution could be wrap the arrow icons with div, and style the wrapper.
Minimized demo of below example on: stackblitz (without functionality, and uses plain CSS)
Example:
<div className="arrows">
<div className="arrow">
<KeyboardArrowLeftOutlinedIcon />
</div>
<div className="arrow">
<KeyboardArrowRightOutlinedIcon />
</div>
</div>
Also some changes in Sass would be needed to match it, such as:
.arrows {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
align-items: center;
.arrow {
cursor: pointer;
background-color: white;
border-radius: 2em;
margin: 0.75em;
padding: 0.5em;
display: flex;
justify-content: center;
align-items: center;
}
}
A scroll bar keeps showing next to my div in all of my project, I have tried to implement and overflow: hidden to its parent but it did not work. I have this problem in other parts of my project also.
import React from 'react'
import "./ContactMe.scss"
export default function ContactMe() {
return (
<div className='contactMe' id='contactMe'>
<div className="left"></div>
<div className="information">
<div className="wrapper">
<h1>Let's discuss your Project!</h1>
<h2>Phone</h2>
<h2>email</h2>
</div></div>
<div className="form">.</div>
</div>
)
}
#import "../../global.scss";
.contactMe{
display: flex;
justify-content: center;
align-items: center;
.left{
position: relative;
left: 0;
width: 2rem;
height: 100%;
background-color: $text;
}
.information{
display: flex;
align-items: center;
justify-content: center;
flex: 0.4;
.wrapper{
display: flex;
flex-direction: column;
align-items: center;
margin-left: 2rem;
h1{
font-size: 5rem;
}
h2{
}
}
}
.form{
flex: 0.6;
background-color: brown;
}
}
Can't figure out how to center 2 buttons horizontally with styled-components.
Below is my code.
Tried many ways to center, but didn't work.
import React from "react"
import styled from "styled-components"
const HomeStyles = styled.div`
h1 {
font-size: 1.5em;
text-align: center;
color: royalblue;
}
button {
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid royalblue;
border-radius: 3px;
color: royalblue;
}
`
export default function Home() {
return (
<HomeStyles>
<h1>Title</h1>
<button>Button1</button>
<button>Button2</button>
</HomeStyles>
)
}
UPDATE: I need to center buttons horizontally
Have you tried using flexbox on parent element?
const HomeStyles = styled.div`
display: flex;
flex-direction: column;
justify-items: center;
align-items: center;
....
`;
const ButtonsWrapper = styled.div`
display: flex;
justify-items: center;
align-items: center;
`;
<HomeStyles>
<h1>Title</h1>
<ButtonsWrapper>
<button>Button1</button>
<button>Button2</button>
</ButtonsWrapper>
</HomeStyles>
Im having a hard time centering a text with awesome font icon, and also centering the icons themselves.
Im using styled components like so:
const StyledIcon = styled(FontAwesomeIcon)`
width: 50px;
display: flex;
justify-content: center;
font-size: 30px;
margin-left: 50px;
`;
const Text = styled.div`
font-size: 13px;
display: flex;
justify-content: center;
`;
and in my component I have the following
<StyledIcon icon={icon1} />
<Text>Charts + Graphs</Text>
<StyledIcon icon={icon2} />
<Text>Classes</Text>
<StyledIcon icon={icon3} />
<Text>Student Information</Text>
<StyledIcon icon={icon4} />
<Text>Knowledge Database</Text>
<StyledIcon icon={icon5}/>
<Text>Class Notes</Text>
This is how it currently looks, any suggestions on how to center text & icon so that they appear in the center of the shaded box?
Use flexbox.
const WrapperAroundIconsAndText = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`;
I have a pretty basic flex setup and, for whatever reason, the div in question won't vertically center inside its parent tag. You can see the isolated test case below.
.likeness-rank-table {
border-radius: 3px;
margin-bottom: 20px;
display: block;
}
.likeness-rank-table .col {
box-sizing: border-box;
text-align: center;
position: relative;
flex: 1;
max-width: 20%;
min-height: 50px;
display: flex;
flex-wrap: wrap;
}
.likeness-rank-table .col .col-inner {
flex: 1;
align-items: center;
justify-content: center;
height: 150px;
}
.likeness-rank-table .likeness-rank-table-body {
display: flex;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border: 1px solid #a2a5a7;
}
.draggable-tags .draggable-tag {
display: inline-block;
float: left;
width: 20%;
margin-bottom: 5px;
}
.draggable-tag {
text-align: center;
padding: 0 15px;
box-sizing: border-box;
}
.draggable-tag .draggable-tag-inner {
position: relative;
padding: 10px 0;
background-color: #63b3ce;
color: #fff;
}
<div class="likeness-rank-table">
<div class="likeness-rank-table-body">
<div class="col">
<div class="col-inner droppable">
<div class="draggable-tag ui-draggable">
<div class="draggable-tag-inner">
This Blue Box Should Be Horizontally and Vertically Centered Inside The Big White Box But It's Not
</div>
</div>
</div>
</div>
</div>
</div>
Here's a codepen to see it:
http://codepen.io/trevorhinesley/pen/grQKPO
There are certain flex properties that are applicable only on flex items, while others are only applicable on flex containers.
The align-items and justify-content properties apply only to flex containers. Yet, you are using them on a flex item...
.likeness-rank-table .col .col-inner {
flex: 1;
align-items: center;
justify-content: center;
height: 150px;
}
... so they are being ignored.
You need to add display: flex to the rule above. That will get align-items: center to work.
However, justify-content: center will continue to fail because the parent has a max-width: 20% limiting horizontal movement.
.likeness-rank-table .col {
box-sizing: border-box;
text-align: center;
position: relative;
flex: 1;
max-width: 20%; /* limits horizontal centering of child element */
min-height: 50px;
display: flex;
flex-wrap: wrap;
}
So, apply the horizontal centering to the parent another level up.
.likeness-rank-table .likeness-rank-table-body {
display: flex;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border: 1px solid #a2a5a7;
justify-content: center; /* new */
}
Revised Codepen
Here's a useful list of flex properties broken down by parent and child: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You need to #include flex on your col-inner (line 40 of your scss), as align-items and justify-content only work on the flexbox element (see this handy guide).
Then to align the .col element within the big white box you can add justify-content: center to .likeness-rank-table-body on line 47 of your scss.