I want to center a div vertically with CSS. I don't want tables or JavaScript, but only pure CSS. I found some solutions, but all of them are missing Internet Explorer 6 support.
<body>
<div>Div to be aligned vertically</div>
</body>
How can I center a div vertically in all major browsers, including Internet Explorer 6?
Below is the best all-around solution I could build to vertically and horizontally center a fixed-width, flexible height content box. It was tested and worked for recent versions of Firefox, Opera, Chrome, and Safari.
.outer {
display: table;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
margin-left: auto;
margin-right: auto;
width: 400px;
/* Whatever width you want */
}
<div class="outer">
<div class="middle">
<div class="inner">
<h1>The Content</h1>
<p>Once upon a midnight dreary...</p>
</div>
</div>
</div>
View A Working Example With Dynamic Content
I built in some dynamic content to test the flexibility and would love to know if anyone sees any problems with it. It should work well for centered overlays also -- lightbox, pop-up, etc.
The simplest way would be the following three lines of CSS:
1) position: relative;
2) top: 50%;
3) transform: translateY(-50%);
Following is an example:
div.outer-div {
height: 170px;
width: 300px;
background-color: lightgray;
}
div.middle-div {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
<div class='outer-div'>
<div class='middle-div'>
Test text
</div>
</div>
One more I can't see on the list:
.Center-Container {
position: relative;
height: 100%;
}
.Absolute-Center {
width: 50%;
height: 50%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
border: solid black;
}
Cross-browser (including Internet Explorer 8 - Internet Explorer 10 without hacks!)
Responsive with percentages and min-/max-
Centered regardless of padding (without box-sizing!)
height must be declared (see Variable Height)
Recommended setting overflow: auto to prevent content spillover (see Overflow)
Source: Absolute Horizontal And Vertical Centering In CSS
Now the Flexbox solution is a very easy way for modern browsers, so I recommend this for you:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background: green;
}
body,
html {
height: 100%;
}
<div class="container">
<div>Div to be aligned vertically</div>
</div>
Actually, you need two div's for vertical centering. The div containing the content must have a width and height.
#container {
position: absolute;
top: 50%;
margin-top: -200px;
/* Half of #content height */
left: 0;
width: 100%;
}
#content {
width: 624px;
margin-left: auto;
margin-right: auto;
height: 395px;
border: 1px solid #000000;
}
<div id="container">
<div id="content">
<h1>Centered div</h1>
</div>
</div>
Here is the result.
Edit 2020: only use this if you need to support old browsers like Internet Explorer 8 (which you should refuse to do 😉). If not, use Flexbox.
This is the simplest method I found and I use it all the time
(jsFiddle demo here).
Thank Chris Coyier from CSS Tricks for this article.
html, body{
height: 100%;
margin: 0;
}
.v-wrap{
height: 100%;
white-space: nowrap;
text-align: center;
}
.v-wrap:before{
content: "";
display: inline-block;
vertical-align: middle;
width: 0;
/* adjust for white space between pseudo element and next sibling */
margin-right: -.25em;
/* stretch line height */
height: 100%;
}
.v-box{
display: inline-block;
vertical-align: middle;
white-space: normal;
}
<div class="v-wrap">
<article class="v-box">
<p>This is how I've been doing it for some time</p>
</article>
</div>
Support starts with Internet Explorer 8.
After a lot of research I finally found the ultimate solution. It works even for floated elements. View Source
.element {
position: relative;
top: 50%;
transform: translateY(-50%); /* or try 50% */
}
Use the CSS Flexbox align-items property to achieve this.
html, body {
height: 100%;
}
body {
display: flex;
align-items: center;
}
<div>This is centered vertically</div>
To center the div on a page, check the fiddle link.
#vh {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.box{
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 100px;
height: 100px;
background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
Another option is to use flex box, check the fiddle link.
.vh {
background-color: #ddd;
height: 400px;
align-items: center;
display: flex;
}
.vh > div {
width: 100%;
text-align: center;
vertical-align: middle;
}
<div class="vh">
<div>Div to be aligned vertically</div>
</div>
Another option is to use a CSS 3 transform:
#vh {
position: absolute;
top: 50%;
left: 50%;
/*transform: translateX(-50%) translateY(-50%);*/
transform: translate(-50%, -50%);
}
.box{
border-radius: 15px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
padding: 25px;
width: 100px;
height: 100px;
background: white;
}
<div id="vh" class="box">Div to be aligned vertically</div>
The easiest solution is below:
.outer-div{
width: 100%;
height: 200px;
display: flex;
border:1px solid #000;
}
.inner-div{
margin: auto;
text-align: center;
border: 1px solid red;
}
<div class="outer-div">
<div class="inner-div">
Hey there!
</div>
</div>
There are multiple ways to achieve this.
Using flex property of CSS.
Solution #1
.parent {
width: 400px;
height:200px;
background: blue;
display: flex;
align-items: center;
justify-content:center;
}
.child {
width: 75px;
height: 75px;
background: yellow;
}
<div class="parent">
<div class="child"></div>
</div>
or by using display: flex; and margin: auto;
Solution #2
.parent {
width: 400px;
height:200px;
background: blue;
display: flex;
}
.child {
width: 75px;
height: 75px;
background: yellow;
margin:auto;
}
<div class="parent">
<div class="child"></div>
</div>
show text center
Solution #3
.parent {
width: 400px;
height: 200px;
background: yellow;
display: flex;
align-items: center;
justify-content:center;
}
<div class="parent">Center</div>
Using percentage(%) height and width.
Solution #4
.parent {
position: absolute;
height:100%;
width:100%;
background: blue;
display: flex;
align-items: center;
justify-content:center;
}
.child {
width: 75px;
height: 75px;
background: yellow;
}
<div class="parent">
<div class="child"></div>
</div>
Unfortunately — but not surprisingly — the solution is more complicated than one would wish it to be. Also unfortunately, you'll need to use additional divs around the div you want vertically centered.
For standards-compliant browsers like Mozilla, Opera, Safari, etc. you need to set the outer div to be displayed as a table and the inner div to be displayed as a table-cell — which can then be vertically centered. For Internet Explorer, you need to position the inner div absolutely within the outer div and then specify the top as 50%. The following pages explain this technique well and provide some code samples too:
Vertical Centering in CSS
Vertical Centering in CSS with Unknown Height (Internet Explorer 7 compatible) (Archived article courtesy of the Wayback Machine)
There is also a technique to do the vertical centering using JavaScript. Vertical alignment of content with JavaScript & CSS demonstrates it.
If someone cares for Internet Explorer 10 (and later) only, use Flexbox:
.parent {
width: 500px;
height: 500px;
background: yellow;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.centered {
width: 100px;
height: 100px;
background: blue;
}
<div class="parent">
<div class="centered"></div>
</div>
Flexbox support: http://caniuse.com/flexbox
A modern way to center an element vertically would be to use flexbox.
You need a parent to decide the height and a child to center.
The example below will center a div to the center within your browser. What's important (in my example) is to set height: 100% to body and html and then min-height: 100% to your container.
body, html {
background: #F5F5F5;
box-sizing: border-box;
height: 100%;
margin: 0;
}
#center_container {
align-items: center;
display: flex;
min-height: 100%;
}
#center {
background: white;
margin: 0 auto;
padding: 10px;
text-align: center;
width: 200px;
}
<div id='center_container'>
<div id='center'>I am center.</div>
</div>
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* (x, y) => position */
-ms-transform: translate(-50%, -50%); /* IE 9 */
-webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */
}
.vertical {
position: absolute;
top: 50%;
//left: 0;
transform: translate(0, -50%); /* (x, y) => position */
}
.horizontal {
position: absolute;
//top: 0;
left: 50%;
transform: translate(-50%, 0); /* (x, y) => position */
}
div {
padding: 1em;
background-color: grey;
color: white;
}
<body>
<div class="vertical">Vertically left</div>
<div class="horizontal">Horizontal top</div>
<div class="center">Vertically Horizontal</div>
</body>
Related: Center a Image
Centering only vertically
If you don't care about Internet Explorer 6 and 7, you can use a technique that involves two containers.
The outer container:
should have display: table;
The inner container:
should have display: table-cell;
should have vertical-align: middle;
The content box:
should have display: inline-block;
You can add any content you want to the content box without caring about its width or height!
Demo:
body {
margin: 0;
}
.outer-container {
position: absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
}
.centered-content {
display: inline-block;
background: #fff;
padding: 20px;
border: 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Malcolm in the Middle
</div>
</div>
</div>
See also this Fiddle!
Centering horizontally and vertically
If you want to center both horizontally and vertically, you also need the following.
The inner container:
should have text-align: center;
The content box:
should re-adjust the horizontal text-alignment to for example text-align: left; or text-align: right;, unless you want text to be centered
Demo:
body {
margin: 0;
}
.outer-container {
position: absolute;
display: table;
width: 100%; /* This could be ANY width */
height: 100%; /* This could be ANY height */
background: #ccc;
}
.inner-container {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.centered-content {
display: inline-block;
text-align: left;
background: #fff;
padding: 20px;
border: 1px solid #000;
}
<div class="outer-container">
<div class="inner-container">
<div class="centered-content">
Malcolm in the Middle
</div>
</div>
</div>
See also this Fiddle!
It can be done in two ways
body{
left: 50%;
top:50%;
transform: translate(-50%, -50%);
height: 100%;
width: 100%;
}
OR
Using flex
body {
height:100%
width:100%
display: flex;
justify-content: center;
align-items: center;
}
align-items:center; makes the content vertically center
justify-content: center;makes the content horizontally center
This is always where I go when I have to come back to this issue.
For those who don't want to make the jump:
Specify the parent container as position:relative or position:absolute.
Specify a fixed height on the child container.
Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
Set margin-top:-yy where yy is half the height of the child container to offset the item up.
An example of this in code:
<style type="text/css">
#myoutercontainer {position:relative}
#myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
I just wrote this CSS and to know more, please go through: This article with vertical align anything with just 3 lines of CSS.
.element {
position: relative;
top: 50%;
transform: perspective(1px) translateY(-50%);
}
For newcomers, please try:
display: flex;
align-items: center;
justify-content: center;
The three lines of code using transform works practically on modern browsers and Internet Explorer:
.element{
position: relative;
top: 50%;
transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
}
I am adding this answer since I found some incompleteness in the previous version of this answer (and Stack Overflow won't allow me to simply comment).
'position' relative messes up the styling if the current div is in the body and has no container div. However 'fixed' seems to work, but it obviously fixes the content in the center of the viewport
Also I used this styling for centering some overlay divs and found that in Mozilla all elements inside this transformed div had lost their bottom borders. Possibly a rendering issue. But adding just the minimal padding to some of them rendered it correctly. Chrome and Internet Explorer (surprisingly) rendered the boxes without any need for padding
CSS Grid
body, html { margin: 0; }
body {
display: grid;
min-height: 100vh;
align-items: center;
}
<div>Div to be aligned vertically</div>
.center{
display: grid;
place-items: center;
}
The answer from Billbad only works with a fixed width of the .inner div.
This solution works for a dynamic width by adding the attribute text-align: center to the .outer div.
.outer {
position: absolute;
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
text-align: center;
display: inline-block;
width: auto;
}
<div class="outer">
<div class="middle">
<div class="inner">
Content
</div>
</div>
</div>
Just do it: Add the class at your div:
.modal {
margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 240px;
}
And read this article for an explanation. Note: Height is necessary.
I did it with this (change width, height, margin-top and margin-left accordingly):
.wrapper {
width: 960px;
height: 590px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -295px;
margin-left: -480px;
}
<div class="wrapper"> -- Content -- </div>
Not answering for browser compatibility but to also mention the new Grid and the not so new Flexbox feature.
Grid
From: Mozilla - Grid Documentation - Align Div Vertically
Browser Support: Grid Browser Support
CSS:
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
grid-auto-rows: 200px;
grid-template-areas:
". a a ."
". a a .";
}
.item1 {
grid-area: a;
align-self: center;
justify-self: center;
}
HTML:
<div class="wrapper">
<div class="item1">Item 1</div>
</div>
Flexbox
Browser Support: Flexbox Browser Support
CSS:
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
I think a solid solution for all browsers without using Flexbox - "align-items: center;" is a combination of display: table and vertical-align: middle;.
CSS
.vertically-center
{
display: table;
width: 100%; /* Optional */
height: 100%; /* Optional */
}
.vertically-center > div
{
display: table-cell;
vertical-align: middle;
}
HTML
<div class="vertically-center">
<div>
<div style="border: 1px solid black;">some text</div>
</div>
</div>
‣Demo: https://jsfiddle.net/6m640rpp/
Especially for parent divs with relative (unknown) height, the centering in the unknown solution works great for me. There are some really nice code examples in the article.
It was tested in Chrome, Firefox, Opera, and Internet Explorer.
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
<div style="width: 400px; height: 200px;">
<div class="block" style="height: 90%; width: 100%">
<div class="centered">
<h1>Some text</h1>
<p>Any other text..."</p>
</div>
</div>
</div>
There is a trick I found out recently: You need to use top 50%, and then you do a translateY(-50%).
.outer-div {
position: relative;
height: 150px;
width: 150px;
background-color: red;
}
.centered-div {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
background-color: white;
}
<div class='outer-div'>
<div class='centered-div'>
Test text
</div>
</div>
I have a single page application built with Vue. I'm trying to create a native-like view, with a no bounce and scroll to top when browsing the pages. The problem is that it doesn't scroll, when no bounce css is provided (overflow, width/height etc).
document.getElementById('test').scrollTo({
top: 1000,
left: 0
})
html {
visibility: inherit;
width: 100%;
height: 100%;
}
body {
-webkit-font-smoothing: antialiased;
background-color: #edf2f9;
color: #000000;
position: fixed;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
text-rendering: optimizeLegibility;
overflow: hidden;
touch-action: manipulation;
-webkit-user-drag: none;
-ms-content-zooming: none;
word-wrap: break-word;
overscroll-behavior-y: none;
margin: 0;
padding: 0;
}
main {
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
position: absolute;
flex-direction: column;
justify-content: space-between;
contain: layout size style;
overflow: hidden;
z-index: 0;
}
section {
padding-top: 96px;
padding-bottom: 96px;
overflow: scroll;
}
<main>
<section>
<div style="height: 5000px;" id="test">
<p>test</p>
</div>
</section>
</main>
Can someone help me out, please? Thanks!
use the ID "test" for the section element.
The section is the element that has content that is larger than its own container and can therefore be scrolled. Therefore scrollTo can be applied to this element. The <div> below has no content larger than its own container, so it cannot be scrolled.
It turned out, that there's a simple CSS setting, that can solve all bounce problems, without having to use width: 100%; height: 100%;. After that, scrolling works perfectly. I'm not sure about the browser compatibility, but it works on my latest MacOS and iOS, so I'll stick to it.
body {
overscroll-behavior: none;
}
Taken from: https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior
I'll be using some SVGs that will be those avatars on the axis. For now all I need is a hint on how to set those avatars at the very end of every axis.
I am trying to achieve this:
This the code I have so far:
body {
background-color: #de4e40;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
}
.squareLoader {
height: 200px;
width: 200px;
background-color: white;
border: 1px solid black;
border-radius: 50%;
}
<div class='squareLoader'></div>
And here is a codepen in case you want to take a look.
Is there any guide or someone can help me on how to achieve this?
I can use flexbox and also I am using React Native. Just in case.
Make squareLoader a relative parent
Position element in corners using translate, top, left
Share styles wherever possible
Store repeated offset value in CSS variable
:root {
--offset: -1.4em;
}
body {
background-color: #de4e40;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
}
.squareLoader {
height: 200px;
width: 200px;
background-color: white;
border: 1px solid black;
border-radius: 50%;
position: relative;
}
.squareLoader img {
position: absolute;
width: 50px;
}
.one, .three {
left: 50%;
transform: translateX(-50%);
}
.two, .four {
top: 50%;
transform: translateY(-50%);
}
.one {
top: var(--offset);
}
.two {
right: var(--offset);
}
.three {
bottom: var(--offset);
}
.four {
left: var(--offset);
}
<div class="squareLoader">
<img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="one">
<img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="two">
<img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="three">
<img src="https://image.flaticon.com/icons/svg/190/190675.svg" alt="" class="four">
</div>
https://jsfiddle.net/uf2t5p6r/3/
If I understand your post correctly, you want to place SVG images on the North, South, East, and West points of a circle with CSS; It is definitely possible to do this with CSS, but it depends completely on the size of the container and the size of the images being used.
The example circle you provided has a set height and width, so assuming that your SVG images are also a set size and do not change with page size you can do something like this.
body {
background-color: #de4e40;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
}
.squareLoader {
/* added 'position: relative', because parent elements of absolute positioned elements have to be positioned to prevent mayhem */
position: relative;
height: 200px;
width: 200px;
background-color: white;
border: 1px solid black;
border-radius: 50%;
}
.avatar {
position: absolute;
left: 75px;
top: 75px;
border: 1px solid black;
height: 50px;
width: 50px;
}
.avatarN {
top: -25px;
}
.avatarS {
top: 175px;
}
.avatarE {
left: 175px;
}
.avatarW {
left: -25px;
}
and the HTML with .avatar <div>s (you can stick the SVG images inside these divs):
<div class='squareLoader'>
<div class="avatar avatarN"></div>
<div class="avatar avatarS"></div>
<div class="avatar avatarE"></div>
<div class="avatar avatarW"></div>
</div>
In the previous example all four avatar <div>s are given a height and width of 50px.
.avatarN has a top position of -25px because that is half of the image's height and a left position of 75px (half of .squareLoader's width minus half of the image's width).
.avatarW has a top position of 75px (half of .squareLoader's height minus half of the image's height) and a left position of 25px, which is half of the image's height.
And so on for the other divs.
If you are going to make your .squareLoader <div> resize based on the page size, and the images resize based on page size, you can use the calc() CSS function which can be used anywhere a length unit is allowed in CSS.
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
w3Schools has a pretty decent cursory explanation of all the units allowed in CSS:
https://www.w3schools.com/cssref/css_units.asp
And also, here's their page on position values in CSS as well:
https://www.w3schools.com/cssref/pr_class_position.asp
Whether or not you are using flexbox, you'll still have to use the position property to get the images where you want them.
One idea to create this is to consider only background and it will be easier to handle:
body {
background-color: #de4e40;
text-align: center;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
margin: 0;
display: flex;
}
.squareLoader {
height: 250px;
width: 250px;
background:
url(https://picsum.photos/50/50?image=1069) top center,
url(https://picsum.photos/50/50?image=1069) bottom center,
url(https://picsum.photos/50/50?image=1069) left center,
url(https://picsum.photos/50/50?image=1069) right center,
/*the circle*/
radial-gradient(farthest-side,
#fff calc(100% - 32px),#000 calc(100% - 30px),
#000 calc(100% - 30px),#000 calc(100% - 20px),
transparent calc(100% - 18px));
background-repeat:no-repeat;
}
<div class='squareLoader'></div>
I have an overlay image that needs to be responsive vertically and horizontally to work on desktop and mobile.
Edit: By vertically responsive, I mean it needs to stay within the window and not overflow below the bottom of the screen.
There's a element on top of the image that needs to stay in the same place, and the image must retain its aspect ratio.
I'd rather do this with pure CSS, but could use JS for browser compatibility or a simpler solution.
http://codepen.io/brooksroche/pen/mEgJmd?editors=1100
<div class="container">
<div class="img-container">
<img src="http://placehold.it/300X200">
<div class="example"></div>
</div>
</div>
.container {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.img-container {
position: relative;
margin: 0 auto;
border: 1px solid red;
width: 300px;
max-width: 100%;
}
.img-container img {
display: block;
max-width: 100%;
max-height: 100%;
}
.example {
position: absolute;
border: 1px solid blue;
top: 40%;
left: 30%;
width: 38%;
height: 20%;
}
Try setting the width and height to auto:
.img-container img {
display: block;
width: auto;
height: auto;
}
Or I have set the width or height, then auto the other which has worked.
Check out CSS media queries.
The max-width and max-height CSS attributes should be able to solve your problem once you pick the appropriate breakpoints for the screen sizes you want to cover.
Check out this Stack Overflow post.
Update
I just updated codepen & also putted the code here too.
<div class="container">
<div class="img-container">
<img src="http://placehold.it/500X300">
<div class="example"></div>
</div>
</div>
.container {
border: 1px solid red;
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.img-container {
position: relative;
overflow: hidden;
display: flex;
}
.img-container img {
display: block;
max-width: 100%;
margin: auto;
}
.example {
border: 1px solid blue;
height: 20%;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
Here is the working codepen
I have an image which changes size to the windows size, and I need to position an element (anchor tag) on it so that it is always in the same place relative to the image. The image is not a background image but an HTML element.
This question is very similar but is for when the image is a background image.
Position element over background image. But the BG img changes size with the window. CSS
<img src="images/img.jpg" >
Link that should be over the image in a certain location.
<div class="wrapper">
<img src="images/img.jpg">
Link that should be over the image in a certain location.
</div>
<style>
.wrapper {
position: relative;
}
a {
position: absolute;
top: 10%;
left: 10%;
}
</style>
Wrap the image etc in an shrink-wrapped div and base the positioning off that.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.map {
margin: 10px;
border: 5px solid red;
position: relative;
display: inline-block;
}
.map img {
max-width: 100%;
display: block;
}
.box {
width: 5%;
height: 5%;
background-image: url(http://www.clker.com/cliparts/W/0/g/a/W/E/map-pin-red.svg);
background-position: top center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
#pin-1 {
top: 25%;
left: 36%;
}
.box:hover > .pin-text {
display: block;
}
.pin-text {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 75%;
white-space: nowrap;
display: none;
}
.pin-text h3 {
color: white;
text-shadow: 1px 1px 1px #000;
}
<div class="map">
<img src="http://connect.homes.com/wp-content/uploads/2012/05/200392710-0012.jpg" alt="" />
<div id="pin-1" class="box">
<div class="pin-text">
<h3>My House</h3>
</div>
</div>
</div>
Codepen Demo
Do you mean something like this?
.image {
position: relative;
width: 100%; /* for IE 6 */
}
a {
position: absolute;
top: 20px;
left: 0;
width: 100%;
}
<div class="image">
<img src="http://kingofwallpapers.com/grey/grey-001.jpg"/>
Link that should be over the image in a certain location.
</div>