I have looked up some tips about how to center a div in the middle of the page. I used this method:
width: 750px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -375px;
So, now that the div is in the middle of the page, I need some images inside of it to line up directly on top of one another. If I do this, I can fade them out using jQuery, revealing the new image.
Now, I tried many different techniques to line them up, but none work when they are centered like this.
HTML:
<div class="choose" align="center">
<h2 id="question">Rock, paper, or scissors?</h2>
<img src="Images/Rock.png" id="rock">
<img src="Images/Result/Red Rock.png" id="Selected" style="opacity:1">
<img src="Images/Paper.png" id="paper">
<img src="Images/Result/Red Paper.png" id="Selected" style="opacity:1">
<img src="Images/Scissors.png" id="scissors">
<img src="Images/Result/Red Scissors.png" id="Selected" style="opacity:1">
</div>
CSS:
.choose {
width: 750px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
margin-top: -200px;
margin-left: -375px;
}
.choose img {
margin-left: 5px;
margin-right: 5px;
width: 150px;
}
How do I do it?
This is a rock paper scissors game if you hadn't noticed. Here's what I've made so far.
You can position the images with absolute in the same coordinates so they stack on top of each other.
When your element has a specific width, left:0; right:0; margin:auto; is a cool way to horizontally center it in its relative parent. Same method works for vertical centering.
.choose img {
width:150px;
height:150px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
You can also use this method to offset elements from the center.
.choose img.rock {
left:-300px;
}
.choose img.sci {
left:300px;
}
Rock will be 300 to the left and scissors 300 to the right.
Related
I'm not sure how to position these images on a webpage properly - here's a rough outline of the positioning (the squares are the images).
I know I need to use absolute positioning because the images overlap each other, but I'm not sure how to make this responsive without using a lot of media queries.
Here's the code for my attempt:
<section id="homepage">
<img src={Square} alt="blah" className='image image1'/>
<img src={Square} alt="blah" className='image image2'/>
<img src={Square} alt="blah" className='image image3'/>
</section>
#homepage {
height: 100vh;
background: #ffb6b6;
}
.image {
position: absolute;
width: 20vw;
}
.image1 {
top: 18vh;
left: 27vw;
}
.image2 {
top: 30vh;
left: 50vw;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.image3 {
top: 40vh;
right: 27vw;
}
Any help is really appreciated!
This will work if you want them overlapping but works best in an equal x and y view as shown on your example. If you do not want them overlapping, change the image size to 33.3 Let me know if I have understood your problem correctly.
If you want them to stay fixed then put them in a fixed size container and adjust the image size accordingly, there is enough for you to play around with hopefully.
The images have been placed inside DIVs as it makes positioning easier I think anyway.
body {
padding:0;
margin:0;
background: #ffb6b6;
}
#homepage {
height: 100vh;
width: 100vw;
background: #ffb6b6;
display:flex;
align-items:center;
justify-content:center;
}
.image {
width: 50vw;
height: auto;
}
.image1 {
position:absolute;
z-index:1;
top: 0;
left:0;
}
.image2 {
position: absolute;
z-index:1;
display:flex;
align-items:center;
justify-content:center;
}
.image3 {
position:absolute;
z-index:3;
bottom:0;
right:0;
}
<div id="homepage">
<div class='image1'><img src='https://randomuser.me/api/portraits/med/men/41.jpg' alt="blah" class='image'/></div>
<div class='image2'><img src='https://randomuser.me/api/portraits/med/men/42.jpg' alt="blah" class='image'/></div>
<div class='image3'><img src='https://randomuser.me/api/portraits/med/men/43.jpg' alt="blah" class='image'/></div>
</div>
I'm trying to place an a book (img2) on a bookshelf (img1), and the following code is positioning the book based on the window and not the position of the bookshelf. I was wondering if anyone knew how to make the book position based on the bookshelf. Right now the book is resizing properly but not positioning itself right.
<style>
.bookcontainer {
}
.img1 {
max-width: 100%;
max-height: 90%;
position: absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
.img2 {
position:absolute;
right: 40%;
top: 15%;
width: 50%;
max-width:50%;
}
</style>
<div class="bookcontainer">
<img class="img1" src="/assets/shelfbg.png">
<img class="img2" src="/assets/book.png">
</div>
The parent container must have the css position set too, so let the bookshelf img define space and let the book be absolute this way:
.bookcontainer {
position: relative;
}
.img1 {
width: 100%;
}
.img2 {
position:absolute;
right: 40%;
top: 15%;
width: 50%;
max-width:50%;
}
That way, using percents you can adjust the book position and size relative to its parent container.
I have this simple HTML code, but make me frustrated because it can't center vertically :
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
and here's my CSS :
.outer {
position: relative;
height: 350px;
}
.inner {
position: absolute;
height: 100px;
top: 50%
}
the .inner div is really center vertically, but based on top side of it. because of top: 50%, what I want is this .inner div really centered vertically on top of .outer. how to do that?
You can center your element using css3 even if you don't know the dimensions.
.inner {
position: absolute;
height: 100px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Since you know the height of both elements you can set your top to top: 125px;
(350 - 100) / 2.
UPDATED WITH JQUERY
http://jsfiddle.net/yf0ncd7f/
Actually an easy way to center a absolute div is to use margin: auto;
section {
width: 100%;
height: 800px;
position: relative;
background: #eee;
}
div {
width: 500px;
height: 300px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: orange;
}
<section>
<div></div>
</section>
I added borders to differentiate clearly
Is this you want?
http://plnkr.co/edit/JRct1x95gnIUl8jITzG0?p=preview
.outer {
position: relative;
height: 150px;
border : 1px solid #f00;
}
.inner {
position: absolute;
height: 80px;
top:0;
bottom:0;
margin:auto;
border : 1px solid #0f0;
}
You could use this CSS trick to make the div vertically centered (and optionally horizontally as well). This works for a parent div of any height and width, as long as they are specified.
.inner {
position:absolute;
// The height and width of the element have to be set for this to work
height:100px;
width:100px;
// Setting the top and bottom to 0px as well as the margins to auto
// causes the div to be centered vertically.
top: 0px;
bottom: 0px;
margin-top: auto;
margin-bottom: auto;
// To also center the div horizontally, do the same for
// left, right and the margins.
left: 0px;
right: 0px;
margin-left:auto;
margin-right:auto;
}
Note that this solution only works when the height of the parent div is known beforehand and is specified. So the parent element needs to have height:100px or whatever amount of pixels you need it to be. Also the height can't be percentual, meaning that if the height of the parent div is declared as height:50%, this will NOT work.
The inner div can actually have a
You can set it by line-height property set it to the height of the div as in your code it should be line-height: 100px;
.outer {
position: relative;
height: 350px;
background: gray;
}
.inner {
position: absolute;
height: 100px;
line-height: 100px;
background: blue;
}
<div class="outer">
<div class="inner">
Hello World
</div>
</div>
I have looked all over the web for this answer but it seems to me that in order to horizontally center an image in div with absolute position, I need to know the dimensions of the image, but it's dynamic.
Here is my html:
<header>
<div id="elogo">
<img src="http://www.ftiweb.com/images/eStore/eStore_wht50.png">
</div>
<div id="nav">TOUR | MENU</div>
</header>
<div id="content">
<img class="ipad" src="http://ftiweb.com/images/eStore/Ipad_hand.png">
</div>
<footer>
<div id="foot">© FTIeStore 2013 • Privacy Policy</div>
</footer>
and here is the .css I'm using:
#content {
width: 70%;
height: 80%;
border: 1px solid red;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -35%;
display: table-cell;
img.ipad {
max-width: 100%;
max-height: 100%;
position: absolute;
bottom: 0px;
display: block;
}
The goal is just to have the image stay at the bottom/center of the page and re-size to fit the browser window. If I'm over-complicating this, please feel free to suggest an alternative.
Here is a link to a js.fiddle:
bottom-centered img - js.fiddle
If you want it to be absolute position do it like this:
http://jsbin.com/aveped/1/edit
img {
width:20%;
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
margin:auto;
}
The parent needs to have position relative, or it will be positioned against the body.
You dont need width for this, I just included width because my image is so big.
left = center position - half the width of the image
img {
position: absolute;
bottom: 0;
left: 50%; /*half the container width*/
margin-left: -250px; /*half the width of the image*/
}
I have a GoogleMaps on my website.
My problem is CSS, how to do a CENTERED div that is positioned over Google Maps?
<div style="position:relative">
<div style="width:300px; height:300px" id="map_localization"></div>
<div style="position:absolute; width:100px; margin:0px auto;">CENTERED</div>
</div>
This is what almost works for me, but need to put the CENTERED layer OVER the map
Can you reveal some code?
I would do it by putting both the map and the div to be centered within a relative positioned div. Then I would absolute position both the map and the div inside.
I would center the div inside with absolute positioning: http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/
Specifically, the CSS of the div to be centered would look something like this.
#divToBeCentered {
width: 200px;
position: absolute;
left: 50%;
margin-left: -100px;
}
Update
Actually, this fiddle I made illustrates what I meant by putting both the map and another div in a containing div:
http://jsfiddle.net/2zaxd/
Here's the HTML (similar to what you had).
<div id="containerForAll">
<div id="map_localization"></div>
<div id="divToBeCentered">CENTERED</div>
</div>
and the CSS.
#containerForAll, #map_localization, #divToBeCentered {
border: 1px solid #000;
}
#containerForAll {
position: relative;
width: 300px;
height: 300px;
}
#map_localization, #divToBeCentered {
position: absolute;
}
#map_localization {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#divToBeCentered {
width: 100px;
height: 100px;
margin-left: -50px;
left: 50%;
top: 50%;
margin-top: -50px;
}
This centers the inner div above your map via absolute positioning.