I have a <table> and I wish to display an <img> over the <table> in the exact center.
How would I do that?
If the dimensions of the image are fixed (say, width 200 height 300), then something like this should work:
HTML:
<div id="table-and-image-container">
<table id="the-table">...</table>
<img src="..." id="the-image" />
</div>
CSS:
#table-and-image-container
{
position: relative;
display: inline-block;
}
#the-table
{
z-index: 1;
}
#the-image
{
left: 50%;
margin-left: -100px; /* = 200px width of image / 2 */
margin-top: -150px; /* = 300px height of image / 2 */
position: absolute;
top: 50%;
z-index: 2;
}
The containing #table-and-image-container will be the size of the table, since position: absolute will take #the-image out of the sizing algorithm and display: inline-block will reduce the width to the width of the table instead of 100% of the container. Then you use standard top/left/margin tricks to position the image in the center, and use z-index to make sure it goes on top.
Related
How to place object in percentage of the entire screen in HTML, not just placing next to the previous object? For example, <div> at the location of 50% screen's width, 30% screen's height.
There's some requirements for this:
Objects should be able to be placed to the desired location by percentage of the entire screen, no matter of other objects.
Objects should be able to overwrap other objects at the same location.
Sorry for poor English :|
I am not sure about your question. Let me try to answer it. In the css we have variable call vh for viewport height and vw for viewport width.
The idea is to place the element 30% of height = 30vh, and 50% width = 50vw. We can set the parent element to have relative, and the child that you want to set position with absolute position.
It would be something like below. Thanks
body {
position: relative;
width: 100%;
height: 100%;
display: block;
color: #fff;
background: #000;
}
#screen .child {
position: absolute;
top: 30vh;
left: 50vw;
background: red;
width: 100px;
height: 50px;
}
<div id="screen">
Parent
<div class="child">
</div>
</div>
Try this CSS
.fixed-div{
position: fixed;
left: 50vw;
top: 30vh;
transform: translate(-50%, -50%); /* Moves the center of the element to its original top left corner*/
z-index: 1;
}
What I want:
I have a PNG image of a shirt which has an clear background, and I want to place it on top of a colored square, such that the shirt in the image will "pop" over the edges of the square, for decorative purposes.
The width of the image is set to 100%, and the height is set automaticaly to keep the original ratio. If the window is resized, the squares height and width should be relative to the images height and width, and should resize responsively alongside the image.
What I've tried:
What is using a div for the decorative square, and a img html element for the image, and placing them both in a container:
This is the CSS for the square:
.square {
width: 80%;
height: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
background-color: red;
z-index: -1;
}
CSS for the image:
.shirtImage {
width: 100%;
margin-left: auto;
margin-right: auto;
}
And the container is simply a div.
The Problem:
The height of 80% set for the square is relative to the the whole page, all the way to the bottom, instead of just the div wrapping the image and the square.
I realize that this method is bound not to work since i'm expecting the square to infer its height from the parent (the wrapping div) which infers its height from another child (the image), but can't quite understand entirely why it isn't working, and can't figure out how to do it.
you need to use a pseudo, so the div becomes the parent , and from there use vertical padding or margin to sretch the div into a square. Image can be layed in absolute to avoid modifying height of the div.
https://developer.mozilla.org/en-US/docs/Web/CSS/padding
<percentage>
The size of the padding as a percentage, relative to the width of the containing block.
possible example
.square {
width: 80%;
height: 80%;
margin-left: auto;
margin-right: auto;
margin-top: 10%;
background-color: red;
z-index: -1;
position: relative;
overflow: hidden;
}
.square:before {
content: '';
display: block;
padding-top: 100%;/* equals width of parent */
}
.shirtImage {
width: 95%;/* 95 instead 100 for the demo*/
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom:0;
right:0;
}
<div class="square">
<img class="shirtImage" src="http://dummyimage.com/100/fe0">
</div>
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 not too sure if this can be achieved in pure CSS, though it would be preferable. I have an image:
<img src="#" class="article-thumb">
CSS:
.article-thumb {
height: 55%;
}
So, how can I make the width to equal whatever the height is? I'm trying to achieve an image that's a perfect circle (so I obviously have some border-radius applied), and that can also scale to fill as much as it's container (actually to fill 55% of it's container in height to be specific)
Here is one way of doing it which involves some extra mark-up so it may not appeal to everyone.
Let .wrap be some parent, containing block with some width and height (can be in % values).
Define an inline-block child container, .framer, whose width is a % of the parent, for example, 23%.
Within .framer, place a square image .aspect-setter (dimensions not critical, just keep it small) and set the width to 100%. The image will then scale to the width of .framer and .framer will shrink-to-fit the image (because it is an inline-block) and keep its intrinsic shape (because height is auto). Use visibility: hidden to hide the image while keeping it in the content flow.
Define .avatar-container as an absolutely positioned element and use the offsets to scale it to fit .framer. Since .framer is square, .avatar-container will also be square.
Using an extra image is not overly elegant, but it gets the job done.
.wrap {
width: 400px;
height: 250px;
border: 1px dotted gray;
}
.framer {
display: inline-block;
position: relative;
border: 1px dashed blue;
width: 23%;
}
.aspect-setter {
vertical-align: top;
visibility: hidden;
width: 100%;
height: auto;
}
.avatar-container {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: 50%;
background-image: url('http://www.wisportsfan.com/siteresources/images/defaultavatar.jpg');
background-size: cover;
}
<div class="wrap">
<div class="framer">
<img class="aspect-setter" src="http://placehold.it/100x100">
<div class="avatar-container"></div>
</div>
</div>
Is it possible to dynamically set a divs width, then set its height to a certain percentage of that width. Something like this:
#myDiv{
width:%100;
height: {35% of width};
}
I want to retain the ratio of the width to height of a div regardless of what the width may be.
You can do this with CSS by setting the height to zero and then adding a percentage to padding-bottom. You might have to tweak it a little to get the desired outcome but here's a fiddle with an example
http://jsfiddle.net/wbq8o3s7/
#myDiv {
width: 100%;
height: 0;
padding-bottom: 35%;
background-color: #333;
}
<div id="myDiv"></div>
HTML:
<div class='box'>
<div class='content'>All your content are belong to us</div>
</div>
We use two block elements to achieve the desired behaviour, box for width, content for height.
CSS:
.box{
position: relative;
width: 50%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 100%; /*What you want the height to be in relation to the width*/
}
The Content:
Then set the content to cover the entire box absolutely so no matter the size, it fits!
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Tada you are done...
SOURCE: Pure CSS
Try a simple JavaScript:
document.getElementById("elemID").style.height =
Math.round((document.getElementById("elemID").style.width * 100) / 35) + "px";
This will get a percentage (Rounded) of the with, and assign it to the height.