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.
Related
I have an image, and a text-group that holds text.
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
I want the first word to always be positioned half on the image and half off the image like this.
The Problem: When I add more text into the text-group, it pushes the first word up.
Without adding a height to my text-group and without changing the bottom position of my text-group, how can I prevent my text from being pushed up when more text is added? In other words, how can I achieve the result below?
Full HTML and CSS
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
img {
width: 100%;
height: 300px;
object-fit: cover;
}
.text-group {
position: absolute;
bottom: -15%;
}
h1 {
color: green;
font-size: 5rem;
}
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
you might not need position. A negative top margin on the first h1 is plenty enough, no need then to mind img's height.
* {
margin: 0;
padding: 0;
}
.container {
/* position: relative; */ /*optionnal i believe */
}
img {
width: 100%;
height: 300px;
object-fit: cover;
}
.text-group {
/* position:absolute */ /*optionnal i believe */
}
.text-group h1:first-child {
margin-top: -0.7em;
}
h1 {
color: green;
font-size: 5rem;
}
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
works the same with position:
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
img {
width: 100%;
height: 300px;
object-fit: cover;
}
.text-group {
position: absolute
}
.text-group h1:first-child {
margin-top: -0.7em;
}
h1 {
color: green;
font-size: 5rem;
}
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
You have to position your position:absolute; from the top instead of the bottom. Because it will fix it from the top:
.text-group {
position: absolute;
top: 81%;
}
DEMO
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
img {
width: 100%;
height: 300px;
object-fit: cover;
}
.text-group {
position: absolute;
top: 81%;
}
h1 {
color: green;
font-size: 5rem;
}
<div class="container">
<img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<div class="text-group">
<h1>Moon</h1>
<h1>Star</h1>
</div>
</div>
Use:
top: 85%;
instead of:
bottom: 15%;
This is an easy fix
Just change the text-group class to this, changing the position to absolute, this makes the element positioned absolutely to its first positioned parent.
.text-group {
position: absolute;
top: 80%;
}
You can learn more about css positioning here, as it as been explained in full details https://medium.com/#leannezhang/difference-between-css-position-absolute-versus-relative-35f064384c6
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>
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>
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;
}