I know this is a question that has been answered before but for some reason, I can't get anything to work. I have an image inside a div that is sticky. The image is currently aligned in the center horizontally but I can't get it to align in the center vertically. The image is stuck to the top of the div.
This is my HTML code:
<section>
<div class="stickyImg img-1">
<img src="MainImgCrop.jpeg" class="stickyImg">
</div>
</section>
And this is my CSS code:
section {
display: flex;
flex-direction: row;
}
section div.stickyImg {
height: 92vh;
background-color: purple;
background-size: cover;
background-position: center;
position: sticky;
position: -webkit-sticky;
top: 8vh;
width: 50vw;
margin: 0;
}
.stickyImg {
width: 90%;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
margin: auto;
vertical-align: middle;
top: 50%;
}
Any help would be appreciated, thank you!
section {
display: flex;
flex-direction: row;
}
section div.stickyImg {
height: 92vh;
background-color: purple;
background-size: cover;
background-position: center;
position: sticky;
position: -webkit-sticky;
top: 8vh;
width: 50vw;
margin: 0;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
.stickyImg {
width: 90%;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
margin: auto;
vertical-align: middle;
top: 50%;
}
<section>
<div class="stickyImg img-1">
<img src="MainImgCrop.jpeg" class="stickyImg">
</div>
</section>
Related
I need help preventing my hero image from stretching on larger screens. It's probably a simple fix but I can't seem to make it happen.
It works fine when I make the screen smaller and on mobile as it reduces with flexbox.
Here's a screenshot of the image:
.hero {
width: 100%;
height: 360px;
background-color: #222222;
display: flex;
justify-content: center;
align-items: center;
position: relative;
z-index: 1000;
/* padding: 20px 50px; */
padding-bottom: 10px;
gap: 50px;
/* background-image: url('../images/elvis.jpeg'); */
/* opacity: 50%; */
}
.movie-details {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
z-index: 1000;
padding: 20px;
}
.bg-image {
position: absolute;
width: 100%;
height: 100%;
}
.banner-img {
opacity: 40%;
height: 100%;
width: 100%;
object-fit: cover;
aspect-ratio: 16 / 9;
}
h1 {
padding-top: 20px;
font-size: 30px;
}
p {
font-size: 14px;
}
<div class="hero">
<div class="bg-image">
<img src="https://via.placeholder.com/800" class="banner-img" />
</div>
<div class="movie-details">
<h1>Movie Title</h1>
<p>Movie overview.</p>
</div>
</div>
Add object-position to .banner-image to control the image's anchor point around which it scales. I think you probably want object-position: center top; or maybe object-position: left top;
.banner-img {
opacity: 40%;
height: 100%;
width: 100%;
object-fit: cover;
aspect-ratio: 16 / 9;
object-position: center top;
}
(Original Answer)
Add a `max-width` and set horizontal margins to `auto` to center it.
.hero {
max-width: 800px;
margin: 0 auto;
}
I have three elements in a div which itself is in another div. I want the first two elements of the inner div to be centered in relation to the outermost div and stacked on top of each other, while the third element should be at the bottom in relation to the outermost div as well. This is a WordPress project, which I am new to, so I don't want to change any of the div or class structure, just style the existing classes. I would prefer Flexbox-only solutions.
Here's the html:
<div class="outerDiv">
<div class="innerDiv">
<p class="e1"> Centered element 1 </p>
<p class="e2"> Centered element 2 </p>
<p> Bottom element </p>
</div>
</div>
Here's the relevant CSS:
.outerDiv{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding: 90px 0 0 0;
box-sizing: border-box;
}
.innerDiv {
align-self: center;
margin: 30px 30px 30px 30px;
}
.e1 {
margin: 10px 0;
}
.e2{
margin: 10px 0;
}
.innerDiv {
/*...*/
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.e1 {
margin: 10px 0;
margin-top: auto;
}
.e2{
margin: 10px 0;
margin-bottom: auto;
}
Edit: Added width/height properties to .innerDiv
Welcome to Stackoverflow. I've updated this to meet your new requirements:
.outerDiv {
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
text-align: center;
}
.innerDiv {
width: 50%;
height: 100%;
}
.e1 {
width: 100%;
height: 25%;
}
.e2 {
width: 100%;
height: 25%;
}
.e3 {
width: 50%;
height: 25%;
position: absolute;
bottom: 0;
}
I am creating a resizable textbox that can stretch vertically and horizontally without warping graphical corner elements. To do so, I am using three vertical sections (top, center, bottom) and three horizontal sections (left, middle, right) within the top and bottom vertical sections. This way, the 'top-middle' and 'bottom-middle' sections can stretch horizontally and the center section can stretch vertically & horizontally, while the corner sections (top-left, top-right, bottom-left..) stay the same width and height to avoid warping.
The problem is: positioning elements so that they line up with one another. Specifically, I seem to be getting some cut-off on the right sides of my corner elements.
Here's a screenshot of the issue:
https://postimg.cc/Xp4dRDrQ
Here is the HTML:
<div className='textbox-container'>
<div className='top-block'>
<div className='left-block' />
<div className='middle-block'>
<p>
Top Block
</p>
</div>
<div className='right-block' />
</div>
<div className='center-block'>
<p>
Center Block
</p>
</div>
<div className='bottom-block'>
<div className='left-block' />
<div className='middle-block'>
<p>
Bottom Block
</p>
</div>
<div className='right-block' />
</div>
</div>
And here is the CSS I am using:
.textbox-container {
display: flex;
flex-flow: column;
align-items: center;
width: 75%;
margin: 0 auto;
}
.top-block {
display: inline-flex;
flex-direction: row;
float: left;
width: 100%;
height: 80px;
margin:0 auto;
margin-top: 10vh;
}
.top-block .left-block {
background-image: url('/src/images/Textbox-Top-Left.png');
background-repeat: no-repeat;
background-size: cover;
width: 150px;
height: 80px;
margin:0 auto;
}
.top-block .middle-block {
width: 100%;
height: 80px;
line-height: 80px;
text-align: right;
vertical-align: middle;
background-image: url('/src/images/Textbox-Top-Middle.png');
color: #fff;
margin:0 auto;
}
.top-block .right-block {
float:right;
background-image: url('/src/images/Textbox-Top-Right.png');
background-repeat: no-repeat;
background-size: cover;
width: 150px;
height: 80px;
margin:0 auto;
}
.center-block {
display: flex;
flex-flow: column;
align-items: center;
justify-content: center;
width: 100%;
height: 800px;
background-image: url('/src/images/Textbox-Center.png');
background-repeat: repeat-y;
background-size: contain;
margin: 0;
}
.bottom-block {
display: inline-flex;
flex-direction: row;
float: left;
width: 100%;
height: 80px;
margin-bottom: 20vh;
}
/* Close but no cigar with magic numbers in bot sections: */
.bottom-block .left-block {
width: 220px;
height: 80px;
background-image: url('/src/images/Textbox-Bottom-Left.png')
}
.bottom-block .middle-block {
width: 100%;
line-height: 80px;
text-align: right;
padding-right: 5vw;
vertical-align: middle;
height: 80px;
background-image: url('/src/images/Textbox-Bottom-Middle.png');
color: #fff;
margin: none;
}
.bottom-block .right-block {
float:right;
width: 220px;
height: 80px;
background-image: url('/src/images/Textbox-Bottom-Right.png')
}
Fiddle (currently not working):
https://jsfiddle.net/edmundw/6xku4qwa/6/
Fiddle collaborate invite:
https://jsfiddle.net/edmundw/6xku4qwa/4/#&togetherjs=4VMz2rGNAo
Any solutions would be greatly appreciated as I am stumped.
Many thanks for reading this far,
Betty.
Hm, I got something working by using actual img elements (which have an inherent width and height) for the individual sections, along with flexbox (specifically flex-basis, flex-grow and flex-shrink).
The only problem I can see is that the center element's background's borders are blurry. Not sure how to fix that, but other than that, it works. No border cutoff.
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.textbox-container {
width: min-content;
height: auto;
overflow: hidden;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.textbox-vertical-block {
width: 100%;
max-width: 100%;
height: 80px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: center;
}
.textbox-vertical-block>* {
width: auto;
height: 100%;
object-fit: fill;
}
.textbox-vertical-block>*:nth-child(2) {
flex-basis: auto;
flex-grow: 1;
flex-shrink: 0;
}
.textbox-center-block {
height: auto;
align-items: stretch;
background-image: url(https://i.postimg.cc/d3p7Nt38/Textbox-Center.png);
background-size: 100% 100%;
background-repeat: repeat;
}
.textbox-center-block.textbox-vertical-block>* {
height: initial;
}
.textbox-center-block>.textbox-block {
width: 6px;
}
.textbox-center-block>textarea {
width: auto;
height: auto;
flex-basis: auto;
flex-grow: 1;
flex-shrink: 1;
margin: 16px;
padding: 16px;
}
<div class="textbox-container">
<div class="textbox-vertical-block">
<img class="textbox-block" src="https://i.postimg.cc/jDn9G5wH/Textbox-Top-Left.png" />
<img class="textbox-block" src="https://i.postimg.cc/qtfY0Ty9/Textbox-Top-Middle.png" />
<img class="textbox-block" src="https://i.postimg.cc/8FhYz0bs/Textbox-Top-Right.png" />
</div>
<div class="textbox-vertical-block textbox-center-block">
<img class="textbox-block" src="https://i.postimg.cc/xcrz8TS0/Textbox-Center-Right.png" />
<textarea></textarea>
<img class="textbox-block" src="https://i.postimg.cc/xcrz8TS0/Textbox-Center-Right.png" />
</div>
<div class="textbox-vertical-block">
<img class="textbox-block" src="https://i.postimg.cc/kD70BqzC/Textbox-Bottom-Left.png" />
<img class="textbox-block" src="https://i.postimg.cc/CdJW89pq/Textbox-Bottom-Middle.png" />
<img class="textbox-block" src="https://i.postimg.cc/dL1gjnJS/Textbox-Bottom-Right.png" />
</div>
</div>
EDIT #1: Removed the blur by using the same method used in the top and bottom sections (extra border and center images (the center image is 1x1 though, so could be easily replaced by background-color)). More flexbox foolery too
I know how to vertically center a div on a web page alone by using position: absolute; but how can I make the child div call internal-container vertically center in the parent div call message-box that contains a scrollbar the red cuts off AKA the internal-container how can I resolve this?
body{
color: white;
}
#message-box{
margin-top: 5px;
position: fixed;
top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
min-height: 150px;
max-height: 250px;
width: 350px;
background-color: black;
overflow: auto;
}
#internal-container{
background-color: red;
height: 80%;
width: 80%;
word-break: break-all;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div id='message-box'>
<div id='internal-container'>
<p>
blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
</p>
</div><!--</internal-container>-->
</div><!--</message-box>-->
Make parent div display: flex and justify-content: center;
* {
margin: 0;
padding: 0;
}
.parent {
width: 100%;
height: 300vh;
background: #338cb0;
display: flex;
align-items: center;
justify-content: center;
}
.child {
width: 80%;
height: 120px;
background: #770022;
}
<div class="parent">
<div class="child"></div>
</div>
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 6 years ago.
I want the content to be centered vertically and horizontally but it gets centered only horizontally. The problem is that I don't have fixed height.
Thank you guys for help!
html,
body {
height: 100% margin: 0;
overflow: hidden;
}
.content {
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
text-align: center;
}
<div class="content">
<h1>Welcome to the website!</h1>
</div>
You can easily center an element respect to the parent in this way (assuming that the parent has position: relative;).
In your example:
h1 {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can also center it in the middle of the screen using position: fixed; instead.
Follow this code
HTML
<body >
<div class="content">
<h1>Welcome to the website!</h1>
</div>
</body>
CSS
html,body {
height : 100%;
width : 100%;
}
.content {
height : 100%;
width : 100%;
display: table;
}
h1 {
text-align: center;
display: table-cell;
vertical-align: middle;
}
Follow this code.
body{
margin: 0;
padding: 0;
}
.content-wrapper{
background-color: #121212;
display: block;
left: 0;
height: 100%;
padding: 15px;
position: fixed;
top: 0;
width: 100%;
}
.content{
background-color: #f5f5f5;
display: table;
height: 100%;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
.centent-cell{
display: table-cell;
height: 100%;
vertical-align: middle;
width: 100%;
}
h1{
color: #121212;
}
<div class="content-wrapper">
<div class="content">
<div class="centent-cell">
<h1>Welcome to the website!</h1>
</div>
</div>
</div>
Here's an example of what you need:
<section>
<div class="centerize">
<div class="v-center">
<div class="box">Say my name!</div>
</div>
</div>
</section>
and CSS
section {
height: 100vh;
background: #fff;
}
.centerize {
display: table;
height: 100%;
width: 100%;
}
.v-center {
display: table-cell;
vertical-align: middle
}
.box {
background: #000;
width: 10%;
margin: 0 auto;
}