This question already has answers here:
Absolute position is not working
(6 answers)
Closed 10 months ago.
Trying to center text over image in HTML, but my method keeps pushing the text to the very beginning of the page at the top. My method is below...
.info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.map-p {
font-size: 27pt;
text-align: center;
color: black;
position: relative;
z-index: 1;
}
<div class="map-section">
<img id="map" src="https://img.freepik.com/free-photo/europe-map-pins-travel-your-planning-trip_255544-1467.jpg?w=2000" alt="Image cannot be displayed" />
<div class="info">
<p class="map-p">We have locations all over!</p>
</div>
</div>
because .map-section needs to have position: relative
long answer:
in order for position absolute to use the reference of the parent. the parent needs to have position: relative
so adding
.map-section: { position: relative };
and fix the transform, should be
transform: translate(50%, -50%);
will get what you want
Two things:
1.) Set position: relative to the parent element (.map-section) to make it the reference for the absolutely positioned element.
2.) (optionally?) Limit the size of your image to its container's width and add height: auto to keep the proportion:
#map {
width: 100%;
height: auto;
}
.map-section {
position: relative;
}
.info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.map-p {
font-size: 27pt;
text-align: center;
color: black;
position: relative;
z-index: 1;
}
<div class="map-section">
<img id="map" src="https://img.freepik.com/free-photo/europe-map-pins-travel-your-planning-trip_255544-1467.jpg?w=2000" alt="Image cannot be displayed" />
<div class="info">
<p class="map-p">We have locations all over!</p>
</div>
</div>
It should be like that
For more info : https://www.w3schools.com/css/css_positioning.asp
.info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.map-p {
font-size: 27pt;
color: black;
position: relative;
z-index: 1;
}
.map-section{
position: relative;
}
Related
Using the left property in #image-list>.image-container>p seems to center the <p> element in the div with id #image-list and not its parent. I do not understand what I did wrong.
btn.onclick = e => {
list = document.getElementById("image-list");
item = list.children[0];
item = item.cloneNode(true);
document.getElementById("image-list").appendChild(item);
}
#image-list {
display: flex;
gap: 4vmin;
position: absolute;
left: 50%;
top: 50%;
transform: translate(0%, -50%);
}
#image-list>.image-container>.image {
width: 40vmin;
height: 56vmin;
object-fit: cover;
object-position: 100% center;
}
#image-list>.image-container>p {
position: absolute;
color: white;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
font-family: Times New Roman;
font-size: 2rem;
-webkit-text-stroke: 0.5px black;
}
#image-list>.image-container {
text-align: center;
position:relative;
}
<div id="image-list">
<div class="image-container">
<p>hello world</p>
<img class="image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png" draggable="false">
</div>
</div>
<button id="btn">add image</button>
To center the <p> element within its parent, which is .image-container, you can add position: relative to .image-container and set left: 50% and transform: translateX(-50%) on #image-list > .image-container > p.
try this example :
#image-list>.image-container {
text-align: center;
position: relative;
}
#image-list>.image-container>p {
position: absolute;
color: white;
top: 25%;
left: 50%;
transform: translateX(-50%);
display: block;
font-family: Times New Roman;
font-size: 2rem;
-webkit-text-stroke: 0.5px black;
}
Absolute positioning is with respect to the edges of the closest positioned ancestor.
"positioned" means "has a position property that is not static.
You haven't set the position property of .image-container, so it has the default value, which is static.
#image-list has position: absolute so it is the closest positioned ancestor so your positioning is done with respect to that element's edges.
The issue is with the left property used in the #image-list > .image-container > p selector. The left property is positioning the element relative to its positioned parent, which is .image-container in this case. Since .image-container doesn't have a specific left property defined, it defaults to 0.
However, the desired effect is to center the element relative to #image-list. To achieve this, you can add position: relative to the #image-list selector, which will make it the positioned parent of .image-container and the element. Then, you can use left: 50% and transform: translateX(-50%) on the element to horizontally center it within #image-list.
Here's the updated CSS:
#image-list {
display: flex;
gap: 4vmin;
position: absolute;
left: 50%;
top: 50%;
transform: translate(0%, -50%);
position: relative; /* added */
}
#image-list > .image-container > p {
position: absolute;
color: white;
top: 25%;
left: 50%;
transform: translateX(-50%); /* updated */
display: block;
font-family: Times New Roman;
font-size: 2rem;
-webkit-text-stroke: 0.5px black;
}
With these changes, the element should be centered horizontally within #image-list.
I am a beginner in coding and I want to place the text in front of the picture.
I am using Komodo. Here is my Code:
Based on your tags, here is a CSS solution. Add this between your <head></head> tags.
<style>
#contenu::after {
content: "words";
}
</style>
This should be it, please leave a comment if you need more help.
This will position text over image and put it in center.
<div>
<img src="">
<h1>Text</h1> <!-- This will positon text over image -->
</div>
div {
position: relative;
text-align: center;
}
image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I have a solution for you here, but it can be implemented in many different ways.
.bandeau {
position: relative;
text-align: center;
}
h1 {
position: absolute;
top: 10%;
left: 20%;
color: red;
}
h2 {
position: absolute;
top: 25%;
left: 20%;
color: red;
}
h3 {
position: absolute;
top: 40%;
left: 20%;
color: red;
}
<div id="bandeau">
<div id="contenu">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" alt="photo d'aceuil">
<h1>Pour ma nadette</h1>
<h2>Mon amoureuse</h2>
<h3>Je t'aime</h3>
</div>
</div>
I hope I could help you
I have an image with a CSS overlay that slides up from the bottom, and it's on the left. I want it in the center. Also, I hate to admit it, but the other post doesn't help. I got a post suggestion(IDK why), but I don't see how it helps me. I'm not super familiar with this and what I'm doing is for a project in a class of mine, which is late, and I'm trying to shoot for extra credit.
I just want to know how to make it go to the center. I have tried moving it to the left by 25, 50, and 75%, same with the right. It just won't move. Here is the code:
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 50%;
height: auto;
}
/* This is what I have been using with to move it. */
.overlay {
position: absolute;
bottom: 0;
left: 0;
/* This will move wherever */
right: 0;
background-color: darkblue;
overflow: hidden;
width: 50%;
height: 0;
transition: .5s ease;
}
.container:hover .overlay {
height: 100%;
}
.text {
white-space: nowrap;
color: red;
font-size: 20px;
font-family: cursive;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="container">
<img src="image is here" alt="Avatar" class="image"> This won't move
<div class="overlay">
<div class="text"><u>This is just here atm</u></div>
</div>
</div>
I solved it. I just needed to use the "center" tag and put my style tag in it. Moved the overlay and it was fixed.
I want to place an overlay on my rounded image but when I set it, the overlay doesn't display over the image correctly? It is filling the column div. Not the overlay container. Can the overlay container be made to size to the image inside of it? I have tried display:inline-block;but that doesn't work. I am using Bootstrap.
HTML Code
<div class="row" style="background-color:#ECECEC">
<div class="col-md-4 col-sm-4" >
<div class="overlaycontainer">
<img class="roundimg" src="images/george1x1.jpg" >
<div class="overlay">
<div class="overlaytext">Hello World</div>
</div>
</div>
<center><h3>George Jones <br><small>Owner and Founder</small></h3></center>
</div>
CSS
.overlay{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
border-radius: 50%;
display:inline-block
}
.overlaycontainer{
display:inline-block
}
.overlaycontainer:hover .overlay{
opacity: 1;
}
.overlaytext{
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.roundimg{
max-width: 75%;
height: auto;
border-radius: 50%;
padding-top:10px;
display: block;
margin: 0 auto;
}
Any help would be appreciated.
Thanks
Joe
I was able to get this working a bit better by making this working demo with a placeholder image I was able to link to.
http://codepen.io/anon/pen/ryYaWx?editors=1100
and then adding position: relative to the .overlaycontainer selector, like this:
.overlaycontainer {
display: inline-block;
position: relative; /* <-- this was added*/
}
This works because you have .overlay set to position: absolute and you want the absolute positioning to be relative to .overlaycontainer instead of the entire page. Adding this line will do that.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have recently started to code again after a long break and now I'm trying hard to see what is it that I'm doing wrong.
I made a JSFiddle here: http://jsfiddle.net/mtsgp3gg/
This is the output I'd like to see: http://puu.sh/jwi3d/233c917986.png
I have a container with 3 images:
<div class="container">
<img src="main picture">
<img id="tape left" src="">
<img id="tape right" src="">
</div>
I would like to put some little "tape thingies" over my main picture using position: relative; and top:0; but so far I failed.
Can anyone point out what I'm doing wrong please?
css position: is somewhat confusing, especially at the start (and it is misused almost 99% of all times).
You use position: relative because you want it to be relative to the container, right? Although this is the obvious behavior, it is not what css does.
position: relative means "I'll give you top/right/... values and want that the element is moved by that amount from where it would occur normally."
You almost always want to use position: absolute which basically means "pick the boundaries of the parent (being specific: the first parent that is not position: static which is the default) and move this element to what I define with top/right/...". (There are more implications like absolute removing the element from the document flow, but that's out of scope at the moment.)
This means you have to
position your container not static. position: relative works fine here, as it does not alter the element if you don't specify top/... .
position your items with position: absolute as they will then be defined relative to their container (not relative to their original position, as they would be with position: relative).
Your example would look like
body {
background: gray;
}
.container {
position: relative;
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
}
.container [id] {
position: absolute;
top: -5px;
}
.container #one {
left: -5px;
}
.container #two {
right: -5px;
transform: rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg">
<img id="one" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png">
<img id="two" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png">
</div>
You're using position:relative when you should be using position:absolute.
body {
background: gray;
}
.container {
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
position: relative;
}
.container #one {
position: absolute;
top: 0;
left: 0;
transform: translate(-25%, -25%)
}
.container #two {
position: absolute;
top: 0;
left: 100%;
transform: translate(-75%, -25%) rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg" />
<img id="one" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png" />
<img id="two" src="http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png" />
</div>
That said, I'd prefer not to have presentational images in the HTML at all. So I'd be using pseudo-elements using the same techniques.
body {
background: gray;
}
.container {
margin-left: 20px;
margin-top: 20px;
width: 200px;
height: 200px;
background: navy;
position: relative;
}
.container::before {
position: absolute;
content: '';
width: 20px;
height: 20px;
background-image: url(http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png);
top: 0;
left: 0;
transform: translate(-25%, -25%);
z-index: 1;
}
.container::after {
position: absolute;
content: '';
width: 20px;
height: 20px;
background-image: url(http://fenrir.info.uaic.ro/~elena.chiosa/img/scoci.png);
top: 0;
left: 100%;
transform: translate(-75%, -25%) rotate(90deg);
}
<div class="container">
<img src="http://www.animal-photography.com/thumbs/blue_eyed_white_long_hair_cat_~AP-G3KLBP-TH.jpg" />
</div>
In this way, the presentational part is now in the CSS and the class can be re-used without having multiple instances of the tape image cluttering up your HTML.
Try to use position: absolute; instead of position: relative;
.container #one{
position: absolute;
top: 10px;
left:20px;
}
.container #two{
position: absolute;
top: 10px;
left:215px;
transform: rotate(90deg);
}
Demo here