I'm a React beginnerCan you explain me how to place a .herogroup (composed by h1, p and a button) in the middle and 20px far away from the bottom of a background (belonging to .Hero)?
<div>
<div className="Hero">
<div className="HeroGroup">
<h1>ABC</h1>
<p>ABC</p>
<Link to="ABC">ABC</Link>
</div>
</div>
CSS
.Hero {
height: 1920px;
background-image: url('../images/abc.jpg');
background-size: cover;}
.HeroGroup{
max-width: 500px;
margin: 0 auto;
padding: 150px 50px;
text-align: center;}
I have used css flex. Which is more convenient to achieve your case than using position absolute.
.Hero {
height: 1920px;
background-image: url('../images/abc.jpg');
background-size: cover;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.HeroGroup{
max-width: 500px;
margin: 0 auto;
padding: 20px 0px;
display: flex;
/* flex-wrap: wrap; */
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
}
<div>
<div class="Hero">
<div class="HeroGroup">
<h1>ABC</h1>
<p>ABC</p>
<Link to="ABC">ABC</Link>
</div>
</div>
In your .HeroGroup class do this
.HeroGroup {
max-width: 500px;
padding: 150px 50px;
margin: 0 auto;
text-align: center;
position: absolute;
bottom: -20px;
}
Related
This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 4 months ago.
I have a horizontally centered column of Flex items ordered from 1 to 5 that are aligned from the top of the container like this:
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
align-items: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container><div class=item>1</div><div class=item>2</div><div class=item>3</div><div class=item>4</div><div class=item>5</div></div>
I would like to let it aligned by the bottom of the container instead. I manage to do it with flex-direction: column-reverse; like in the next Snippet:
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column-reverse;
align-items: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container><div class=item>1</div><div class=item>2</div><div class=item>3</div><div class=item>4</div><div class=item>5</div></div>
However, as you see, the items get out of order! Is there a way to let a flex column on the bottom without reversing the items order using CSS? I tried every Flex property that I know so far without success.
You can use justify-content: end;
.container {
width: 150px;
height: 150px;
border: 1px solid black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: end;
}
.content {
width: 25px;
height: 25px;
border: 1px solid black;
}
<div class="container">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>
You need to use the justify-content property to align content along the main axis (in your case vertically). You are using align-items which defines how the items should be aligned along the cross axis.
body, html {
height: 100%;
position: relative;
margin: 0;
padding: 0;
}
.container {
display: inline-flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-end;
align-content: center;
width: 100%;
height: 100%;
background: pink;
}
.item {
margin: 1px;
width: 30px;
height: 30px;
background: green;
}
<div class=container>
<div class=item>1</div>
<div class=item>2</div>
<div class=item>3</div>
<div class=item>4</div>
<div class=item>5</div>
</div>
I'm trying to make an item center,but somehow it not work
Here is html part:
<div>
<div className={styles.unanswerQuestionContainer}>
<div className={styles.headerContainer}>
<div>Unanswered Questions</div>
<div>Answered Questions</div>
</div>
</div>
</div>
Here is css part:
.unanswerQuestionContainer {
height: 60vh;
width: 60vw;
border: 1px solid;
display: flex;
margin: 20px 0 0 0;
align-self: center;
}
.headerContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
But it show something like this:
It do not center the div, how can i center this ??
Edit: When i try to inspect then it show all of this is margin:
You need to add following style to outer div(parent) unanswerQuestionContainer
display: flex;
justify-content: center;
align-items: center;
height: 100%;
body{
height: 100vh;
margin: 0;
}
.unanswerQuestionContainer {
height: 60vh;
width: 60vw;
border: 1px solid;
display: flex;
margin: 20px 0 0 0;
align-self: center;
}
.headerContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 100%;
}
.outer{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
<div class="outer">
<div class="unanswerQuestionContainer">
<div class="headerContainer">
<div>Unanswered Questions</div>
<div>Answered Questions</div>
</div>
</div>
</div>
You will have to adjust which css properties you will use in order to prevent the two h1 from overlapping.
<div className={styles.unanswerQuestionContainer}>
<div class="Questions">
<p id="question-type">Answered Question</p>
<p id="question-type">Unanswered Question</p>
</div>
</div>
.questions h1 {
width: 100px;
height: 100px;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
I have a pop-up modal which works overall, however the one annoyance is it has a hardcoded max-height which I'd like to eliminate.
Option #1:
Initially I explored using height: auto on the modal, which does keep the modal height to the natural height of the contents. However this effects the collapsing of the modal when you scale the browser viewport to a short height. The modal overflows out of the viewport, instead of only the green image area overflowing.
Option #2: I'm aware of the possibility of max-content (for height... or even max-height ?) but I haven't been able to get it to work anywhere, and anyhow it has spotty browser support.
Option #3 (current): Setting the modal to height: 100% and max-height: 500px is good enough, however obviously the content needs to be shorter than that.
Overall, requirements are:
A - In small screens, the modal should collapse with the green image area overflowing, thereby maintaining modal title and buttons in view.
B - In large screens, the modal height should only be as big as the contents.
C - Whatever happens, the modal should never visibly go past the global padding (2em).
See #modal in CSS below:
Demo and code here (Codepen)
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#app {
background-color: gray;
width: 75%;
height: 75%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 2em;
}
#container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#modal {
/* OPTION #1 */
/* FAILS in small screen: overflow of green image not invoked */
/* height: auto; */
/* OPTION #2 */
/* Not working? */
/* height: max-content; */
/* OPTION #3 */
/* WORKS but specifying a max-height is not ideal */
height: 100%;
max-height: 500px;
width: auto;
position: relative;
background-color: pink;
overflow: hidden;
}
#modal_inner {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
padding: 2em;
box-sizing: border-box;
}
#image {
overflow-y: auto;
overflow-x: hidden;
flex: 1;
}
#image .inner {
background-color: lime;
padding: 1em;
width: 400px;
height: 200px;
}
#controls {
background-color: yellow;
display: flex;
justify-content: center;
max-width: 20em;
width: 100%;
padding: 1em;
margin-top: 1em;
}
#cta {
background-color: white;
display: flex;
justify-content: center;
max-width: 10em;
padding: 1em;
margin-top: 1em;
}
<div id="app">
<div id="container">
<div id="modal">
<div id="modal_inner">
<div id="title">TITLE</div>
<div id="image">
<div class="inner">image</div>
</div>
<div id="controls">controls</div>
<div id="cta">submit</div>
</div>
</div>
</div>
</div>
You are almost good, use max-height:100% and also add display:flex that will give the height:100% effect you are trying to achieve on the modal_inner
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#app {
background-color: gray;
width: 75%;
height: 75%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
padding: 2em;
}
#container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#modal {
max-height: 100%;
display:flex;
position: relative;
background-color: pink;
overflow: hidden;
}
#modal_inner {
display: flex;
flex-direction: column;
align-items: center;
/*height: 100%; remove this*/
padding: 2em;
box-sizing: border-box;
}
#image {
overflow-y: auto;
overflow-x: hidden;
flex: 1;
}
#image .inner {
background-color: lime;
padding: 1em;
width: 400px;
height: 200px;
}
#controls {
background-color: yellow;
display: flex;
justify-content: center;
max-width: 20em;
width: 100%;
padding: 1em;
margin-top: 1em;
}
#cta {
background-color: white;
display: flex;
justify-content: center;
max-width: 10em;
padding: 1em;
margin-top: 1em;
}
<div id="app">
<div id="container">
<div id="modal">
<div id="modal_inner">
<div id="title">TITLE</div>
<div id="image">
<div class="inner">image</div>
</div>
<div id="controls">controls</div>
<div id="cta">submit</div>
</div>
</div>
</div>
</div>
I have the following issue, where I want to move the logo to the position shown in the picture
Im able to move the image around using properties like:
.img-logo{
display:flex;
position: absolute;
text-align: center;
align-items: center;
justify-content: center;
left: 50%
}
But the point is, those are not exact values, I dont know how to do it with exact values
Because if I use
.img-logo{
display:flex;
position: relative;
text-align: center;
align-items: center;
justify-content: center;
}
The image wont even move
The htlm is like this
<div class="main">
<form class='login-form' onSubmit={this.handleSubmit}>
<img alt="image" src={brand} width="60" height="60" class="img-logo"/>
<p class='lf--upper-text' >Welcome to app</p>
<div class="flex-row">
<label class="lf--label" htmlFor="email">
<svg x="0px" y="0px" width="12px" height="13px">
where .main
.main { height: 100%; }
.main {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
and .login-form
.login-form {
width: 100%;
padding: 2em;
position: relative;
background: white;
border-radius: 30px;
#media screen and (min-width: 600px) {
width: 50vw;
max-width: 15em;
}
}
Fixed it
<div class="flex-row img-logo">
<img src={brand} width="60" height="60" class="img-logo-in" />
</div>
css
.img-logo{
display:flex;
position: relative;
text-align: center;
align-items: center;
justify-content: center;
bottom: 20%
}
.img-logo-in{
position:absolute;
left:50%;
transform:translate(-50%); }
I have a flex container with 3 children, and I am wanting to ensure that the children all align at flex-start, however the final child should sit at the bottom of the container.
Is it not possible to combine align-content with align-self?
.container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
padding: 15px 15px 50px 15px;
height: 100%;
background: red;
width: 200px;
height: 500px;
}
.item-1,
.item-2,
.item-3 { width: 100%; }
.item-3 {
align-self: flex-end;
}
<div class="container">
<div class="item-1">One</div>
<div class="item-2">Two</div>
<div class="item-3">Three</div>
</div>
Since you want 100% width of your element, you can switch to column direction then use margin to control alignment:
.container {
display: flex;
flex-direction: column;
padding: 15px 15px 50px 15px;
height: 100%;
background: red;
width: 200px;
height: 300px;
}
.item-3 {
margin-top: auto;
}
<div class="container">
<div class="item-1">One</div>
<div class="item-2">Two</div>
<div class="item-3">Three</div>
</div>