I know there are several similar questions, but I couldn't find solution for my situation
.parent-div{
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
}
img{
max-height: 100px;
}
.image-holder-div{
position: absolute;
right: -15px;
top: -15px;
background-color: white;
padding: 15px;
}
<div class="parent-div">
<div class="image-holder-div">
<img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
</div>
<p>some text here which I need to be ober the image</p>
<p>The same situation is here, need to be... </p>
</div>
This is the situation.
I need the image to be in right place where it is now. (with certain positioning)
And I need to put text over the image holder div. But the main question is to do that without using position:absolute for text.
I uzed z-index but no result.
Give your p tags position:relative and this will solve your problem :)
Below is working snippet:
.parent-div {
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
}
img {
max-height: 100px;
}
.image-holder-div {
position: absolute;
right: -15px;
top: -15px;
background-color: white;
padding: 15px;
}
p {
position: relative;
}
<div class="parent-div">
<div class="image-holder-div">
<img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
</div>
<p>some text here which I need to be ober the image</p>
<p>The same situation is here, need to be... </p>
</div>
Give the p elements a position: relative. Than set z-index: 1; This will put the text in front of the image.
.parent-div{
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
}
.parent-div p {
position: relative;
z-index: 1;
}
img{
max-height: 100px;
}
.image-holder-div{
position: absolute;
right: -15px;
top: -15px;
background-color: white;
padding: 15px;
}
<div class="parent-div">
<div class="image-holder-div">
<img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
</div>
<p>some text here which I need to be ober the image</p>
<p>The same situation is here, need to be... </p>
</div>
Please try this:
.parent-div{
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
}
img{
max-height: 100px;
}
.image-holder-div{
position: absolute;
right: -15px;
top: -15px;
background-color: white;
padding: 15px;
}
.over {
position: relative;
z-index: 4; /* if needed */
}
<div class="parent-div">
<div class="image-holder-div">
<img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
</div>
<p class="over">some text here which I need to be ober the image</p>
<p class="over">The same situation is here, need to be... </p>
</div>
If you want to do that you can just use it as a background image to the div see below.
.parent-div{
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
background-image: url("http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142");
background-repeat: no-repeat;
background-size: auto 100px;
background-position: right top;
}
<div class="parent-div">
<p>some text here which I need to be over the image</p>
<p>The same situation is here, need to be... </p>
</div>
.parent-div{
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
}
img{
max-height: 100px;
}
.image-holder-div{
position: absolute;
right: -15px;
top: -15px;
background-color: white;
padding: 15px;
}
.parent-div p{
position:relative
}
<div class="parent-div">
<div class="image-holder-div">
<img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
</div>
<p>some text here which I need to be ober the image</p>
<p>The same situation is here, need to be... </p>
</div>
p{
position: relative;
}
.parent-div{
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
}
img{
max-height: 100px;
}
.image-holder-div{
position: absolute;
right: -15px;
top: -15px;
background-color: white;
padding: 15px;
}
<div class="parent-div">
<div class="image-holder-div">
<img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
</div>
<p>some text here which I need to be ober the image</p>
<p>The same situation is here, need to be... </p>
</div>
The best solution was to give position: relative to p elements
Link to jsfiddle
.parent-div{
margin-top: 50px;
max-width: 350px;
background-color: azure;
position: relative;
height: 400px;
z-index:-1;
}
img{
max-height: 100px;
z-index:-1;
}
.image-holder-div{
position: absolute;
right: -15px;
top: -15px;
background-color: white;
padding: 15px;
z-index:-1;
}
.parent-div p{z-index:9999;}
<div class="parent-div">
<div class="image-holder-div">
<img src="http://vignette2.wikia.nocookie.net/bof/images/b/ba/PlayStation_Logo.svg/revision/latest?cb=20130905171142">
</div>
<p>some text here which I need to be ober the image</p>
<p>The same situation is here, need to be... </p>
</div>
Related
I am trying to vertically align in the middle several lines of text next to an image which is also centred in its own div.
The parent div of both picture and text div is responsive.
The way I align the picture seems to prevent alignment of the text. I tried with tables and other solutions (also found in stack overflow), but nothing seems to work.
What am I doing wrong?
.parent-wrapper {
position: absolute;
width: 100%;
border-bottom: 1px solid #bfbfbf;
border-top: 1px solid #bfbfbf;
margin-top: 1vw;
margin-bottom: 1vw;
}
.image-wrapper {
position: relative;
float: left;
width: 30%;
padding-top: 30%;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: no-repeat;
background-size: cover;
background-position: center;
min-width: 100%;
}
.text-wrapper {
position: relative;
float: right;
width: 70%;
padding-top: 30%;
overflow: hidden;
}
.text-details {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
vertical-align: middle;
background: center;
}
.some-text {
font-size: 20px;
}
.other-text {
font-size: 20px;
}
.another-text {
font-size: 20px;
}
<div class="parent-wrapper">
<div class="image-wrapper">
<div class="image" style="background-image: url('folder/picture.jpg');" alt="image">
</div>
</div>
<div class="text-wrapper">
<div class="text-details">
<div class="some-text">some text</div>
<div class="other-text">other text</div>
<div class="another-text">another text</div>
</div>
</div>
</div>
try this
.parent{
position:relative;
height:50vh;
background-color:blue;
}
.box-to-center{
position:absolute;
top:50%;
transform: translateY(-50%);
color:white;
}
<div class="parent">
<div class="box-to-center">
some content
</div>
</div>
<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>
Basically, I want to have a hr behind my text and my text will be in the middle of it.
Here's some sample markup:
<div class="test">
<hr class="middle-line"/>
Some Text
</div>
.test {
text-align: center;
}
hr.middle-line {
width: 0px;
height: 100px;
z-index: -1;
}
Link to fiddle; https://jsfiddle.net/hLh55t7p/
You may use absolute positioning like this:
.test {
text-align: center;
position: relative
}
hr.middle-line {
width: 0px;
height: 100px;
z-index: -1;
}
.test p{
position: absolute;
text-align: center;
top: 0;
width: 100%
}
<div class="test">
<hr class="middle-line"/>
<p>Some Text</p>
</div>
Add negative values to the text margin in this way:
.test {
text-align: center;
}
.test div {
margin-top: -70px;
}
hr.middle-line {
width: 0px;
height: 100px;
z-index: -1;
}
HTML:
<div class="test">
<hr class="middle-line"/>
<div>Some Text</div>
</div>
Or you can use position: absolute.
Is it possible to center an image in a div, taking into account the height of the image.
HTML
<div class="holder">
<h3>Article 1</h3>
<div class="tl">
<img src="http://placehold.it/144x70"/>
</div>
<p>Text 1</p>
<p>Text 2</p>
<div class="foot">
<h4>Author</h4>
</div>
</div>
<div class="holder">
<h3>Article 2</h3>
<div class="tl">
<img src="http://placehold.it/144x50"/>
</div>
<p>Text 1</p>
<p>Text 2</p>
<div class="foot">
<h4>Author</h4>
</div>
</div>
<div class="holder">
<h3>Article 3</h3>
<div class="tl">
<img src="http://placehold.it/100x15"/>
</div>
<p>Text 1</p>
<p>Text 2</p>
<div class="foot">
<h4>Author</h4>
</div>
</div>
CSS:
.holder {
width: 144px;
height: 215px;
float: left;
margin: 10px 10px 50px 10px;
padding: 2px;
border: 1px solid #000;
position: relative;
}
h3 {
margin: 4px 0 20px 0;
}
h4, p{
margin: 0;
}
h3, h4, p {
text-align: center;
}
.tl {
text-align: center;
height: 100px;
position: relative;
top: 12%;
transform: translateY(-12%);
}
p {
padding: 0 3px;
line-height: 18px;
}
.foot {
width: 144px;
position: absolute;
top: 197px;
}
I have made a jsfiddle here: https://jsfiddle.net/abn94Ldo/1/
I would like the centre point of all the images to line up so the text in each img placeholder (144x70 etc) is in line.
You can achieve this by two methods [by the way remove the top value for .tl div],
Make img position:absolute and set all the sides to 0 and margin:auto.
img{
position:absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
margin:auto;
}
Refer to jsfiddle Link
To make the tl as display:table; and add a child with display:table-row and another inside with display:table-cell; Now you will be able to make the image position center by using vertical-align: middle;
Refer to jsfiddle Link
I would use a transform :
img {
position: relative;
top: 50%; // vertical placement according to preference
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
https://jsfiddle.net/draquL3p/
Both absolute positioning and a table layout seem a bit hacky (although commonly used). My own choice would be to use them only when legacy browser support is required.
Using positioning aligning image in middle. Demo
.tl img{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
Try this:
https://jsfiddle.net/abn94Ldo/3/
.tl {
vertical-align: middle;
display: table-cell;
text-align: center;
margin-bottom: 30px;
height: 70px;
position: relative;
top: 12%;
transform: translateY(-12%);
width: 144px;
margin: 0 auto;
}
I have a div on which I placed a span and two other divs. one of the divs should appear just after span. so i gave position: absolute for the container div. the next div was supposed to place at top:80%. but since span takes up some with, the actual top ends up at 80%+span height. could u tell me a way to position it correctly, avoiding the spans height?
html
<div class="section" id="about">
<div id="heading">
<span>ABOUT</span>
</div>
<div id="about_definition">
<p>about definition goes here</p>
</div>
<div id="about_services">
<p>about services goes here</p>
</div>
</div>
css
#about_definition {
position: absolute;
width: 100%;
height: 20%;
background-color: white;
}
#about_services {
position:relative;
width: 100%;
height:20%;
top: 80%;
background-color: red;
}
.section {
height: 100%;
}
JSFiddle
Try positioning .section and #about_definition absolutely:
http://jsfiddle.net/isherwood/XzrqB/3
#about_definition {
position: absolute;
width: 100%;
height: 20%;
background-color: white;
}
#about_services {
position:relative;
width: 100%;
height:20%;
top: 80%;
background-color: red;
}
.section {
width: 90%;
height: 100%;
background-color: #eee;
overflow: hidden;
position: absolute;
}