I am trying to get my div container .home-img-text to center vertically in the middle of its parent div .home-img. I have tried setting .home-img-text to position: absolute, relative, I tried padding-top and a bunch of other things, it won't move at all from the top of its parent div.
This can be viewed at this site:
click here
I did not create a snippet because the image will not show with my parallex effect.
Does anyone see what is wrong?
CSS:
.home-img {
position: relative;
margin: auto;
width: 100%;
height: auto;
vertical-align: middle;
}
.parallax-window {
min-height: 300px;
background: transparent;
position: relative;
}
.home-img-text {
position: relative;
z-index: 99;
color: #FFF;
font-size: 4em;
text-align: center;
top: 40%;
}
HTML:
<div class="home-img">
<div class="parallax-window" data-parallax="scroll" data-image-src="/images/try.jpg">
<div class="home-img-text">Quality Solutions</div>
</div>
The proper way to vertically center a box model element is:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Update: this is what happens in your page:
.grand-parent {
position: relative;
width: 300px;
height: 300px;
top: 10%;
left: 50%;
transform: translateX(-50%);
overflow: visible;
border: 1px solid blue;
}
.parent {
height: 400px;
border: 1px solid red;
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
width: 100%;
}
<div class="grand-parent">
<div class="parent">
<div class="child">Quality Solutions</div>
</div>
</div>
To vertically center .child in .grand-parent instead of .parent remove position:relative from .parent.
Related
This question already has answers here:
Fix footer to bottom of page
(14 answers)
Align DIV to bottom of the page
(6 answers)
How can I position my div at the bottom of its container?
(25 answers)
Make div stick to bottom of page
(4 answers)
how to position divs within another div
(3 answers)
Closed 3 years ago.
How can I place the red div always adjacent to the footer even footer height changes?
The bottom position calculation I mean. This is not about sticky footer or positioning footer. Also, the red div must be outside of the footer div like I have given in markup.
Example -
Thanks!
.footer {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: grey;
z-index: 1;
}
.main {
position: relative;
height: 100vh;
width: 100vw;
}
.icon {
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
<div class="main">
<div class="icon"></div>
<div class="footer">Footer</div>
</div>
One way would be to place the .icon within the .footer and set it's left-margin and top-margin to be negative half of the width/height respectively. You can also make it circular by adding border-radius: 50%.
.footer {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: grey;
z-index: 1;
}
.footer .icon {
width: 50px;
height: 50px;
background: red;
position: absolute;
margin: -25px 0 0 -25px;
left: 50%;
z-index: 2;
border-radius: 50%;
}
.main {
position: relative;
height: 100vh;
width: 100vw;
}
<div class="main">
<p>Lorm ipsum dolor sit amet</p>
<div class="footer">
<div class="icon"></div>
Footer
</div>
</div>
You can try below: Put icon div inside footer div and add margin-top:-25 (half of the height of icon) to the icon and add border-radius: 50%; to make div as circle
.footer {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: grey;
z-index: 1;
}
.main {
position: relative;
height: 100vh;
width: 100vw;
}
.icon {
margin-top: -25px;
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 50%;
transform: translateX(-50%);
z-index: 2;
border-radius: 50%;
}
<div class="main">
<div class="footer"><div class="icon"></div>Footer</div>
</div>
Place the icon div in the footer, and set the top to 0;
Also, I modified the translate rule slightly so that the div would be centered horizontally as well as vertically. Also added border-radius: 50% to make the icon round.
.footer {
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
background: grey;
z-index: 1;
}
.main {
position: relative;
height: 100vh;
width: 100vw;
}
.icon {
width: 50px;
height: 50px;
background: red;
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -50%);
z-index: 2;
border-radius: 50%;
}
<div class="main">
<div class="footer">
<div class="icon"></div>
Footer
</div>
</div>
The Element is not resizing and browser is not re-calculating the position of the Element even though all the widths and heights are mentioned in percentages only. This code basically renders a Squared DIV with Two elements one with Centered and another at right top corner of the SQuare.
<html>
<head>
<style>
.board {
font-size: 8em;
}
.cellContainerOuter {
width: 100%;
padding-bottom: 100%;
position: relative;
background-color: yellow;
border: 1px solid black;
}
.cellContainer {
width: 100%;
padding-bottom: 100%;
position: absolute;
display: table;
}
.cellContainerInner {
padding-bottom: 50%;
padding-top: 50%;
padding-left: 50%;
padding-right: 50%;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
border: 0px dotted white;
position: absolute;
bottom: 20%;
top: 20%;
left: 20%;
right: 20%;
overflow: hidden;
text-overflow: clip;
display: block;
}
.weight {
position: absolute;
right: 0px;
top: 0px;
margin: 2px;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
</body>
</html>
Any help to resolve this issue is highly appreciated.
CodePen: https://codepen.io/mdileep/full/MGrNgw/
Refactored your CSS.
Let me know if this is the behaviour you are expecting.
OR with responsive you mean to change your height of 6 as well?
body {
margin: 0;
}
.cellContainer {
position: relative;
background: yellow;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.cellContainerInner {
border: 1px solid;
height: 100%;
display: flex;
}
.weight {
font-size: 8em;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid;
}
.text {
flex: 1;
font-size: 8em;
/* border:2px solid; */
align-self: center;
text-align: center;
}
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
Currently I have a container with a hover overlay that darkens the entire container. I wish to show an edit button alongside the overlay right in the middle.
.service-inner {
text-decoration: none;
color: white;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pale-grey;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.service-inner:hover > .overlay {
position: absolute;
display: block;
top: 0;
width: 100%;
height: 100%;
left: 0;
background-color: black;
opacity: 0.8;
z-index: 100;
}
<div class="service-inner">
<div class="overlay"></div>
</div>
What would be the best way to go about this?
Add a div class="button" on the same level as your overlay and give it the same positioning properties but a higher z-index, then activate it on hover the same as your overlay element.
.button {
display:none;
}
.container:hover > .button{
position: absolute;
display: block;
top: 50%;
width:20%;
left: 40%;
background-color: green;
color:black;
z-index: 200;
}
Bear with me on this... little hard to explain. So what I'm attempting to do is have a block of text remove the background of a div directly behind it. The image linked below was done is Illustrator and now I'm trying to find a solution within HTML & CSS.
Illustrator screenshot of what I'm trying to accomplish
.grid-item {
position: relative;
width: 300px;
height: 200px;
padding: 5px;
}
.grid-container {
position: relative;
width: 100%;
height: 100%;
background-color: #eee;
}
.grid-container img {
position: absolute;
}
.grid-item-overlay {
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
background-color: rgba(0,0,0,0.5);
}
span {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
font-weight: 700;
font-family: sans-serif;
font-size: 40px;
text-align: center;
color: #fff;
}
<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span>Text Here</span>
</div>
</div>
</div>
The objective is to have the span text create a transparent mask of the grid-item-overlay background.
I'm open to any suggestions! :)
You could try working with mix-blend-mode,
mix-blend-mode : The mix-blend-mode CSS property describes how an
element's content should blend with the content of the element's
direct parent and the element's background.
.grid-item {
position: relative;
width: 300px;
height: 200px;
padding: 5px;
}
.grid-container {
position: relative;
width: 100%;
height: 100%;
background-color: #eee;
}
.grid-container img {
position: absolute;
}
.grid-item-overlay {
position: absolute;
top: 5px;
left: 5px;
bottom: 5px;
right: 5px;
background-color: rgba(0,0,0,0.5);
}
span {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
font-weight: 700;
font-family: sans-serif;
font-size: 40px;
text-align: center;
color:rgba(255,255,255,1);
mix-blend-mode: overlay;
}
<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span>Text Here</span>
</div>
</div>
</div>
<div class="grid-item">
<div class="grid-container">
<img src="https://unsplash.it/300/200/?random">
<div class="grid-item-overlay">
<span class="text">Text Here</span>
</div>
</div>
</div>
Add this css to your css File
.text{
color: rgba(255, 255, 255, 0.1);
}
.grid-item-overlay:before{
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: block;
z-index:0;
background-color:rgba(255,0,0,0.5);
}
I'm trying to align a div in the center, but neither text-align: center, nor margin: 0 auto, seems to work on the absolute positioned element. I'm assuming neither works on absolute positioned elements. In this case, what should I do instead?
#wrap {
border: 1px solid black;
position: relative;
width: 500px;
height: 250px;
margin: 0 auto;
text-align: center;
}
#absolute {
border: 1px solid red;
position: absolute;
display: block;
bottom: 0;
margin: 0 auto;
cursor: pointer;
}
<div id='wrap'>
<div id='absolute'>Click Me</div>
</div>
Without changing the HTML, the easiest approach to center the element horizontally would be to combine left: 50% and transform: translateX(-50%). This will essentially position the element 50% to the right and then displace half of the element's width by transforming it -50% to the left. In doing so, the element will be centered horizontally regardless of the width which means that you don't need to hardcode any values.
position: absolute;
left: 50%;
transform: translateX(-50%);
Updated Snippet:
#wrap {
border: 1px solid black;
position: relative;
width: 500px;
margin: 0 auto;
height: 80px;
}
#absolute {
border: 1px solid red;
position: absolute;
transform: translateX(-50%);
left: 50%;
bottom: 0;
cursor: pointer;
}
<div id="wrap">
<div id="absolute">Click Me</div>
</div>
Alternatively, if you can change the HTML, simply add left: 0 and right: 0 to the absolutely positioned element element in order for it to take the width of the parent container. Then you can add text-align: center in order to center the child element:
Updated Snippet:
#wrap {
border: 1px solid black;
position: relative;
width: 500px;
margin: 0 auto;
height: 80px;
}
#absolute {
position: absolute;
left: 0; right: 0;
bottom: 0;
text-align: center;
}
#absolute > span {
border: 1px solid red;
cursor: pointer;
}
<div id="wrap">
<div id="absolute">
<span>Click Me</span>
</div>
</div>
Since you know the size of the wrapper, you can just add left: 250px (half the wrapper size) to the css of your absolutely positioned element.