I'm trying to get exactly the same effect as here: Responsive images positioned over image , so I want my absolute positioned elements to stay in the same place but get smaller or bigger when the browser is being sized. I tried many different possibilites, before I worked with this code, but I don't understand why my wrapping container (id="wrapper") is placed under the image. And to get the question mark on the image I would need to use minus percentage. In the example I copied from another question in stackoverflow there are bootstrap styles. I don't know and I don't want to use bootstrap though. I will be very grateful for all suggiestions what I'm doing wrong.
#wrapper {
position: relative;
display: inline;
}
#questionMark {
position:absolute;
left:33%;
top:-43%;
max-width: 10%;
}
This is my fiddle: https://jsfiddle.net/8obzf2c8/2/
inline elements doesn't get the height of the elements inside them.
You should remove the display: inline from the #wrapper element.
#wrapper {
position: relative;
margin-top: 150px;
}
#questionMark {
position:absolute;
left:33%;
top:-43%;
max-width: 10%;
}
<div id=wrapper>
<img src="http://e.allegroimg.pl/s400/19/53/89/71/60/5389716014"/>
<img id="questionMark" src="https://image.freepik.com/free-icon/speech-bubble-with-question-mark_318-78800.png"/>
</div>
I also set margin-top to make sure the question mark image is in the viewport.
Your wrapper has property display: inline; so it behave like a fe. span element, it is not a block.
Change display: inline; to display: inline-block; so the wrapper behaves like inline container. You will also need to change this weird top: -43%; to fe. top: 43% as things will get more normal and predictable.
Use display:inline-block; instead of inline
#wrapper {
position: relative;
display: inline-block;
}
#questionMark {
position:absolute;
left:33%;
top:43%;
max-width: 10%;
}
This will make the image placed in the center and will also be responsive with all screen sizes.
#wrapper {
position: relative;
display: inline-block;
}
img{
width: 100%;
height: auto;
}
#questionMark {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
max-width: 10%;
}
<div id=wrapper>
<img src="http://e.allegroimg.pl/s400/19/53/89/71/60/5389716014"/>
<img id="questionMark" src="https://image.freepik.com/free-icon/speech-bubble-with-question-mark_318-78800.png"/>
</div>
Hope this helps,
Related
I have an image inside of a div to put a button on the image. I've searched around the web but can't find any way to center the image.
I've tried making it it's own class and centering the img tag itself, but none of them seem to work.
<div class="container">
<img src="https://cdn.discordapp.com/avatars/543553627600584735/470015f633d8ae88462c3cf9fa7fd01f.png?size=256" alt="utili">
Utili
</div>
The image should be centered in the middle of the page, so I can line up 3.
In HTML:
<img src="paris.jpg" alt="Paris" class="center">
To center an image, set left and right margin to auto and make it into a block element:
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
So, you can center any image while its inside a div. I hope this might help you.
You could position the .btn absolute to the relative container. If you know the size you want your image, even better.
How I would attempt to achieve it:
.container {
position: relative;
height: (the height of your image);
width: (the width of your image);
}
img {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
}
.btn {
position: absolute;
bottom: (however far you want it from the bottom in pxs - so lets say 10px);
left: 50%;
transform: translateX(-50%);
z-index: 2;
}
I'm having a hard time solving the following problem:
I'm trying to position a few pictures in the following manner:
They all take the whole width of the screen (I know their number)
The sequence of pictures is aligned in the middle vertically
I have found this answer, but it's not too helpful, as it allows centering only one image.
Also, vertical-align won't help much, since it only positions inline elements.
Here's my working example:
https://jsfiddle.net/3psbtqxv/1/
body {
padding-top: 5%;
position: absolute;
vertical-align: middle;
}
img {
max-width: 20%;
height: auto;
}
<body>
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1"><img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
</body>
I would appreciate some help.
First google search of "css position center of page" gave me this result:
Quick CSS Trick: How To Center an Object Exactly In The Center
In order to get the image exactly centered, it's a simple matter of applying a negative top margin of half the images height, and a negative left margin of half the images width. For this example, like so:
.centered {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
This works wonderfully when you know the size of the thing you are centering. If you don't know, or are thinking it might change and want to be future proof, try this:
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
This works with your example.
Edit:
If you want it to take the whole screen width then use
.centered {
position: fixed;
top: 50%;
left: 0%;
/* bring your own prefixes */
transform: translate(-0%, -50%);
}
Try this
img {
max-width:20%;
height:auto;
margin-top: 50%;
}
The best way to center child element is using flexbox.
#parent{
display:flex;
justify-content: center;
align-items: center;
width:200px;
height:200px;
background-color:red;
}
#child{
width:100px;
height:100px;
background-color:blue;
}
<div id="parent">
<div id="child">
child
</div></div>
There are several ways to achieve that, but most of the methods will need some update in your markup. I created this Fiddle which center the images adding some extra wrappers around. I hope it helps.
HTML:
<body>
<div class="wrapper">
<div class="inner">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
<img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
</div>
</div>
</body>
CSS:
html,
body {
height: 100%;
}
.wrapper {
display: table;
height: 100%;
}
.inner {
display: table-cell;
vertical-align: middle;
}
.inner img {
width: 20%;
float: left;
}
I have two images inside a div. I'd like to position these images using percent relatively to the parent div.
Here's a fiddle to understand: http://jsfiddle.net/b9ce626s/
I tried to set position: absolute; on the image but it uses window width.
I need the image on the very right be positioned at 95% of the red div, and not the window. I also don't want the left image impacts the positionning of the right one.
Add position: relative on #main so the position of the images are both based on that element (and not on the root element).
Example: http://jsfiddle.net/b9ce626s/1/
A page element with relative positioning gives you the control to absolutely position children elements inside of it.
https://css-tricks.com/absolute-positioning-inside-relative-positioning/
As a side note, if you assign a width with a percentage value to the images, it will be now based on the parent element width.
Try this..
Html
<div id="main">
<img id="card1" src="http://dynamic-projets.fr/wp-content/uploads/2012/08/attach_image.png" alt="KH" />
<img id="card2" src="http://www.rotaryd1650.org/images/main/IconesCollectionPro/128x128/image_gimp.png" alt="9H" />
</div>
Css
body, html {
width: 100%;
height: 100%;
margin: 0;
}
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position:relative;
}
img {
position: absolute;
width: 5%;
}
#card1 {
left:5%;
}
#card2 {
right: 5%;
}
Fiddle Sample
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position: relative;
}
Give main position: relative; like so:
#main {
display: block;
width: 50%;
height: 50%;
background-color: red;
position:relative;
}
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.
JSFiddle Demo
I am trying to position an div element at the bottom right of an image, that is inside a container element. I set position relative to the container, and position absolute to the inner div, but it does not work. Here is the (http://jsfiddle.net/ZC84G/). Please, help.
<div class="container">
<div class="icon"></div>
<img src="/images/someImage.png" />
</div>
CSS:
body {
background-color: black;
}
.container {
position: relative;
}
.container img {
max-width: 75%;
max-height: 80%;
}
.icon{
background-image: url('http://icons.iconarchive.com/icons/iconfactory/star-wars-lego/32/Biggs-No-Helmet-icon.png');
width: 31px;
height: 31px;
position: absolute;
bottom: 5px;
right: 5px;
}
This is because by default div has block display mode, and it's width is 100% of the parent container. Try to add display: inline to .container
.container {
position: relative;
display: inline;
}
Here's the corrected jsfiddle: http://jsfiddle.net/ZC84G/4/
Your container div has no width and height set. And since a <div> is a block-level element by default, it will be set to 100% width ie expand to however much horizontal space is left.
Plus, you're also constraining your image size:
max-width: 75%;
max-height: 80%;
If you replace the img CSS with:
max-width: 75%;
max-height: 80%;
It works fine, and as expected: http://jsfiddle.net/ZC84G/3/
I've modified your CSS on the image a bit.
Basically, I set it to scale properly to the size of its container, and now it sits where I think you wanted it. The way you could find this yourself in the future would be to inspect the element by using right click from your browser, and looking at the size of the different elements to see what was expanding larger/smaller than it should.
.container img {
max-width: 100%;
height: auto;
}
I initially had vertically centered text using the table/table-cell display method, which worked great. The problem came when I switched to a percentage height for the container and used a block level image (sibling to the text in question) to set the size of the container. I can no longer get the absolutely positioned text to equal the container height without declaring a static container size. Obviously this is simple to solve with JS, but I'd prefer not to go that route.
I'm also using picturefill.js to serve images, so using the image as a css background isn't an option (unless anyone has suggestions to make it work).
Here's the fiddle:
http://jsfiddle.net/rHZdQ/
And here's the code:
HTML
<div class="tile">
<a href="#">
<img src="#">
<div class="header-container">
<h2>title</h2>
</div>
</a>
</div>
CSS
.tile {
position: relative;
}
img {
display: block;
}
a {
display: block;
position: relative;
}
.header-container {
display: table;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
h2 {
display: table-cell;
text-align: center;
vertical-align: middle;
z-index: 199;
}
Centering Text in an Absolutely Positioned Image Overlay Using CSS
Consider the following HTML snippet:
<div class="tile">
<div class="image-container">
<img src="http://placekitten.com/400/400">
</div>
<div class="header-container">
<div class="panel">
<h2><span>percentage sized div</span></h2>
</div>
</div>
</div>
and apply the following CSS rules:
.tile {
border: 3px solid #555;
position: relative;
margin: 6px;
float: left;
}
.image-container img {
display: block;
height: 100%;
width: 100%;
}
.header-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.header-container .panel {
display: table;
width: 100%;
height: 100%;
}
.header-container .panel h2 {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.header-container .panel h2 span {
display: inline-block;
padding: 5px;
border-radius: 5px;
background-color: rgba(255,255,255,0.5);
}
The parent/containing block is div.tile, and it has two child elements, .image-container which is in-flow, and .header-container which is absolutely positioned and hence out-of-flow.
Since .tile is floated, it shrinks-to-fit the content, which is the image in .image-container, with the dimensions determined by the native height and width of the image.
To create the overlay, .header-container is absolutely positioned to the top and left of its relatively positioned parent, with 100% width and height which forces it to extend to the containing block (see yellow outline).
Within .header-container, create an anonymous table by setting display: table to .panel, and specify 100% width and height so it extends and fills the .header-container.
Finally, define an anonymous table-cell on .panel's nested <h2> element, and apply text-align: center and vertical-align: middle to center the text post horizontally and vertically.
Note that the table-cell will extend the full width and height of the table so if you want to style the text with a border or background, you need to wrap it an inline-block element (the <span> in my example).
You can view the code at: jsFiddle Demo
Does your .header-container need to be width:100%? Can you use pixels instead?
If you use pixels and you do the following, then it will center it:
.header-container {
display: table;
height: 100%;
left: 50%;
position: absolute;
top: 0;
width: 400px;
margin-left:-200px;
}
Basically, margin-left has to be equal with half the width and a minus in fornt and then left:50%
UPDATE:
After informing me that it has to be only with percentage, the Jquery would be this:
$(document).ready(function() {
var minus = '-';
var headerwidth = $(".header-container").width();
$(".header-container").css('margin-left',minus+(headerwidth/2)+'px');
$(".header-container").css('left','50%');
});