So I've looked at some similar problem, but I still don't get it. Please take a look on my HTML and CSS sheet:
CSS:
.bottom1Container {
vertical-align: middle;
position: relative;
text-align: right;
}
.bottom1 {
position: absolute;
right: 0;
top: 63%;
width: 100%;
object-fit: scale-down;
}
HTML:
<div class="bottom1Container">
<div class="bottom1" style="background:url(/images/bottom1.svg) no-repeat ;"></div>
So, as you can see there's already position: relative in the parent. But why is this still not working? (btw the bottom1.svg file is an animation svg)
When you make it non 100% wide, it will work
.bottom1Container {
vertical-align: middle;
position: relative;
text-align: right;
}
.bottom1 {
position: absolute;
right: 0;
object-fit: scale-down;
}
div {
height: 200px;
}
<div class="bottom1Container" style="background-color: gray">
<div class="bottom1" style="background-color: blue; width: 50%">
<p>Your div with background image</p>
</div>
</div>
Related
I am new to CSS and HTML, and I am working on my final project for school.
I am trying to absolutely position some text "Welcome" to a div I've made. For some reason it won't position in relation to the div, I've looked it over 10 times and can't figure out why.
I want the "Welcome" text to sit at the bottom of the welcome div, however when I put bottom:0px; into the CSS, it doesn't position according to its parent container and instead goes 0px from the top of the whole screen.
Here's the code:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
height: 150px;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
You are very close. Take the height away from the .w p tag and remove its margin as well:
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
}
#header {
height: 150px;
position: relative;
background-color: red;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
/*height: 150px;*/
margin: 0;
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav"></nav>
</header>
</div>
The problem, as CalvinNunes pointed out, is that you have a height set on .w div. And, p elements have margin and line-height values by default. You need to remove the margin and set the line-height to 1 or less (.5 makes the text touch the bottom of the green box).
#wrapper {
height: 1000px;
margin: 0 auto;
background-image: url(images/background.jpg);
background-size: 100% 100%;
position: relative;
}
#header {
height: 150px;
background-color: red;
position: absolute;
width: 100%;
}
#welcome {
position: absolute;
bottom: 0;
width: 420px;
height: 100px;
background-color: green;
}
.w {
position: absolute;
font-size: 64px;
left: 20px;
bottom: 0px;
color: #fff;
margin: 0;
line-height: 1;
}
<div id="wrapper">
<header id="header">
<div id="welcome">
<p class="w">Welcome</p>
</div>
<nav id="main nav">
</nav>
</header>
</div>
<!-- End of wrapper-->
If you use absolute on something, related dom element should be relative, absolute or fixed, depending on your needs.
Also check if your absolute element doesn't have some unneeded margins etc.
But in your usage case i don't think that there is absolute needed. you can use bigger paddings for parent element top. Also this can be achieved using flex-end, which will allow dynamic text input.
I have made an analogue clock like so that shares 1 parent div space with 2 other divs:
.left {
vertical-align: top;
width: 27%;
overflow: hidden;
display: inline-block;
}
#picLeft {
height: 100%;
width: 100%;
}
.container {
vertical-align: top;
position: relative;
display: inline-block;
width: 16.7%;
}
.clock {
vertical-align: top;
width: 100%;
height: 100%;
position: relative;
display: inline-block;
}
.hands {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.hands-cl {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
vertical-align: top;
}
.right {
vertical-align: top;
width: 52.2%;
height: 100%;
overflow: hidden;
display: inline-block;
}
.picRight {
width: 100%;
height: 100%;
}
<div class="header-logo">
<div class="left">
<img id="picLeft" src="TIDleft.png">
</div>
<div class="container">
<div class="clock">
<img class="hands" src="TidClockFace.png">
<img id="hourHand" class="hands-cl" src="hourHand.png">
<img id="minuteHand" class="hands-cl" src="hourHand.png">
</div>
</div>
<div class="right">
<img class="picRight" src="TIDright.png">
</div>
</div>
This is what happens:
As You can see it looks ridiculous.
I don't know if the problem is in the rotation or the image size since the divs shrink the images to fit the part of the website.
This is the third day I have been persistently searching for the answer. No stackoverflow threads are similar, and I have run out of ideas for search terms.
I hope this question is asked properly, and enough info has been given.
If not though, don't hesitate to ask for something or correct me.
<div>
<img style="vertical-align:middle" src="https://placehold.it/60x60">
<span style="">Product</span>
</div>
I need it like this and it must be responsiveness too. Can you tell me how to do that?
So this question has been asked many times before, here's a snippet from a duplicate I've answered in the past. Hope you can work your own code into the example shown :)
div.counter {
position: relative;
display: inline-block;
}
div.counter span {
position: absolute;
text-align: center;
height: 100%;
width: 100%;
}
div.counter span:before {
display: inline-block;
vertical-align: middle;
height: 100%;
content: '';
}
<div class="counter">
<span>Product</span>
<img src="http://placehold.it/60x60"/>
</div>
below is code what will do that for you.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>
<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>
<div class="center">
<p><b>Note: </b>Using margin:auto will not work in IE8, unless a !DOCTYPE is declared.</p>
</div>
</body>
</html>
Just put background-image property inside of div style.
One way is to put text as position: absolute;. Another is to put image as background.
#sample-1 img {
vertical-align: middle;
}
#sample-1 {
position: relative;
display: inline-block;
}
#sample-1 span {
position: absolute;
left: 5px;
top: 20px;
}
#sample-2 {
background-image: url('https://placehold.it/60x60');
width: 60px;
height: 60px;
text-align: center;
}
#sample-2 span {
line-height: 60px;
}
<div id="sample-1">
<img src="https://placehold.it/60x60">
<span>Product</span>
</div>
<div id="sample-2">
<span>Product 2</span>
</div>
Try this
<div class="demo">
<img style="vertical-align:middle" src="https://placehold.it/200x200">
<span style="">Product</span>
</div>
css
.demo {
width:200px;
position:relative;
}
.demo span{
position:absolute;
left: 0;
right: 0;
top: 50%;
text-align: center;
margin: -9px auto 0;
}
Use below code in this i have seted line height equals to div height and it is responsive also
#imgContainer{
background: url(https://placehold.it/60x60);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
text-align: center;
}
#imgDesc{
top: 50%;
position: relative;
}
<div id="imgContainer">
<span id="imgDesc">Works.</span>
</div>
.image {
position:relative;
}
.image img {
width:300px;
}
.text {
left: 0;
position:absolute;
text-align:center;
top: 100px;
width: 300px
}
<div class="image">
<img src="https://placehold.it/60x60"/>
<div class="text">
Text
</div>
</div>
This is my first question so appologies if the format is wrong.
I've tried every method I've found on stack overflow but I still cannot get this content to display vertically in the middle.
CSS:
div.img-wrapper {
display: table;
height: 232px;
overflow: hidden;
position: relative;
width: 100%;
}
div.cover {
display: table-cell;
height: 232px;
left: 0;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
text-align: center;
top: 0;
vertical-align: middle;
width: 100%;
}
HTML Markup:
<div class="img-wrapper">
<img alt="" src="img2.jpg">
<div class="cover">
<img alt="" src="img1.png">
<span class="product-name">Product Name</span>
<span class="product-sub">Sub Line</span>
</div>
</div>
I'm using position:absolute as the .cover div rolls over the img to display product information.
Any help would be greatly appreciated :)
Thanks in advance.
Will
Here is my attempt for it. An outter-container is needed because the table won't cover the page's width and height on it's own
Try this:
#outter-container {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
#img-wrapper {
display: table;
width: 100%;
height: 100%;
}
#cover {
display: table-cell;
vertical-align: middle;
text-align: center;
}
DEMO
I need an image to be resized to fit in inside a div. This div must, necessarely, no matter what, be an position: absolute; div. Apart from the image have 100% from its greatest dimension, it should be centered in the other way.
I could resize to fit it, but can't center. I tried to make it inline and use vertical-align, but it didn't work.
Since code worth more than words, check my fiddle example.
This is the code from the jsfiddle:
CSS:
.relative {
width: 400px;
height: 400px;
position: relative;
<!-- Next is not important, only to display better -->
display: block;
background-color: green;
border: 3px solid yellow;
margin-bottom: 10px;
}
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
HTML:
<div class="relative">
<div class="absolute">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg"/>
</div>
</div>
<div class="relative">
<div class="absolute">
<img src="http://us.123rf.com/400wm/400/400/pashok/pashok1101/pashok110100126/8578310-vertical-shot-of-cute-red-cat.jpg"/>
</div>
</div>
you may put the image to background instead of an img tag.
<div class="absolute">
<img src="//upload.wikimedia.org/wikipedia/commons/5/52/Spacer.gif">
</div>
.absolute {
background-image: url(http://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
however, if you can set a fixed height for the div, you can use this:
.absolute { line-height:360px; }
.absolute img { vertical-align:middle; }
Only for semi-new browsers:
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Absolutely position all the things!
transform still needs browser prefixes I hear. -webkit- works for me.
http://jsfiddle.net/rudiedirkx/G9Z7U/1/
Maybe I did not understand the question…
.absolute {
position: absolute;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
background-color: red;
line-height:350px; //new
}
img {
position:relative;
display:inline-block; // new
vertical-align:middle; // new
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}