I have a square image that I want to have centered on the screen. Problem is that I want the image to stay a square, while being not more than 80% of both the width and the height. I have used the following code, which makes my image 80% of the height (when height < width), and centers the image vertically, but not horizontally of course. When using a fixed width, I could have used margin-left: 50%; margin-right: 50%, but with relative size, this would set the left side of the image at 50%. Any ideas?
.my_img{
max-width: 80%;
max-height: 80%;
margin-left: 10%;
margin-top: 10%;
}
Try this:
.my_img_container {
position: relative;
}
.my_img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%)
}
Here is a fiddle:
http://jsfiddle.net/l0wskilled/voubtxrt/
if your image has display: block then you can probably use margin: auto auto and remove the % margins. If its display is inline or inline-block, you can use text-align: center on the parent element of the image to make it horizontally centered. I have not tested this code. If this doesn't work, and you have no problem with jQuery, this can be done with few lines of jQuery.
You could also try:
<div class="container">
<img src="https://www.webkit.org/blog-files/acid3-100.png" class="my_img" />
</div>
With the style:
.my_img {
max-width: 80%;
max-height: 80%;
margin-left: auto;
margin-right: auto;
display: block;
}
I think this is what you are wanting anyway, maybe i'm wrong!
https://jsfiddle.net/dLozvcmo/2/
Related
As the question says, I am trying to center a div on the middle of the screen both horizontally/vertically and resize it at the same time.
I do not have any problems on resizing the content when the screen is smaller even to center the wrapper when it is displayed on big screens, the problems comes when I try to resize the screen and, as the wrapper has a max-height property, it does not never vertically center when resize the screen (because it occupy 300px all the time).
I would like that the div that is centered (wrapper) never will be more than 300px and will be always centered (both vertically/horizontally).
Here is my code:
HTML:
<div id="wrapper">
<div id="content">
</div>
</div>
CSS:
html{
width: 100%;
}
body{
width: 100%;
background-color: red;
margin: 0;
}
#wrapper{
position: absolute;
max-width: 300px;
max-height: 300px;
width: 100%;
height: 100%;
margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}
#content{
position: absolute;
width: 100%;
padding-bottom: 100%;
background-color: yellow;
}
JSFiddle.
I tried a lot of configurations and looked a lot of questions here on StackOverflow but any of them worked for me because most of them are only for horizontally/vertically center or resize a div, but not both.
Note: I cannot use flexbox and I would like to maintain as much as possible the actual CSS code, if possible.
How can I avoid to use max-height (that is broken my vertically centering) and get the same behaviour?
EDIT: The div is already centered both vertically/horizontally. What I want is that the square will be always a square and always be centered. I am sorry if I do not put it very clear.
Now the content is being resize as I want (as a square), the problem is only with vertically align at the same time it resizes.
EDIT 2: If you want to see the effect that I refer in the above edit, resize the screen on my example JSFiddle horizontally and you will see the effect.
Thanks in advance!
You can easily do this with CSS3 transform. It depends of the browsers support you want to offer.
I would suggest to place your content absolute at 50% of your wrapper. Then, you can use a negative translate of 50%. top: 50% and left: 50% will place your content top left corner in the middle. Negative translate of 50% (translate(-50%, -50%)) will move your content half of its width to the left and half of its height to the top.
#content{
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
You can see your updated jsfiddle
EDIT
I misunderstood a part of your question the first time. But you can easily merge a part of your solution and mine to get what you want.
You just need to replace height: 100%; with padding-bottom: 100%; of my previous answer above:
#content{
position: absolute;
width: 100%;
padding-bottom: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See this updated jsfiddle.
Maybe I'm missing something(?), but it looks like you can just add height:100%; to your #content css instead of padding-bottom and it works:
https://jsfiddle.net/puajxgsz/
Also, I played with another way to do it without absolutely positioning anything...because, well, it was sort of interesting:
https://jsfiddle.net/j0ch7oxj/
Height was not respected on this fiddle
I want the image to have a height and width of 80% relative to its parent, vertically and horizontally aligned. For some reason, it does not work.
HTML:
<div id="menu_header_new_orig">
<img id="menu_logo_orig" src="https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg" />
</div>
CSS:
#menu_header_new_orig {
margin-top: 2.5%;
height:40%;
width:100%;
overflow: hidden;
position: relative;
border: 1px solid green;
text-align: center;
}
#menu_logo_orig {
width: 80%;
height: 80%;
position: relative;
}
I have figured it out here, but just in case somebody have better solution.
If I understand you correct :
The parent #menu_header_new_orig own parent must also have a height (obviously 100%)
html, body {
height: 100%;
}
set display to inline, 10% top to get vertical alignment
#menu_logo_orig {
top: 10%;
display: inline;
position: relative;
width: 80%;
height: 80%;
}
Is that what you were heading for? [not really sure] - try to set #menu_header_new_orig height to other things than 40% to get it in another perspective.
forked fiddle -> http://jsfiddle.net/Dmc7j/
I will like to get help please with building a responsive design.
The thing is that I don't know how to position elements as absolute but keep the same distance from top proportions between them.
Here's a link to an example where you can resize the window width and see that the two elements are moving away from each other instead of always keep the same space between them from top.
So what I'm looking for is to kind of faking scaling of the whole thing so it will only get smaller/larger but look always the same.
How can I make the elements to go up and shrink the space from top when window resize please?
http://jsfiddle.net/QV6DR/
.container {
width: 100%;
height: 1000px;
position: relative;
background: #eee;
}
.container div {
height: 0;
position: absolute;
background: #ccc;
}
.elm1 {
width: 20%;
padding-bottom: 20%;
top: 20%;
left: 5%;
}
.elm2 {
width: 30%;
padding-bottom: 30%;
top: 40%;
right: 10%;
}
Because your container has a height of 1000px and your elements are positioned 20% relative to the top of the container(which is always 200px), they wouldn't be able to shift up when the browser window is resized.
If you change the container styles to the following:
.container {
width: 100%;
height: 100%;
position: absolute;
background: #eee;
}
The elements will shift up when your browser window is resized vertically.
I believe the only way to shift them up vertically without resizing the window vertically, would be by using media queries and modifying the top: 40%; styles on your elements.
Here's the fiddle without media queries.
I want to have a site that is 100% of the height of the browser at all times, with the width scaling with an aspect ratio when the height is changed.
I can achieve this using the new vh unit: http://jsbin.com/AmAZaDA/3 (resize browser height)
<body>
<div></div>
</body>
html, body {
height: 100%;
width: 100%;
margin: 0;
}
div {
height: 100%;
width: 130vh;
margin: 0 auto;
background: #f0f;
}
However, I worry about fallback for IE8 and Safari, as it this unit is not supported there.
Are there any other CSS only methods of achieving this effect?
I have a solution that works also with IE8 (using Pure CSS 2.1), but not perfectly.
because I need the browser to recalculate things when he get resized, and apparently it doesn't do that unless he has to (and I cant find a way to make him think he has to), so you will have to refresh the page after resizing.
as far as I know, the only element that can scale reserving his ratio is an <img>, so we will use the <img> to our advantage.
SO, we are going to use an image with the ratio that we want (using the services of placehold.it), lets say we want a 13X10 ratio (like in your example), so we'll use <img src="http://placehold.it/13x10" />.
that image will have a fixed height of 100% the body, and now the width of the image scales with respect to the ratio. so the width of the image is 130% height of the body.
that image is enclosed within a div, and that div has inline-block display, so he takes exactly the size of his content. witch is the size you want.
we remove the image from the display by using visibility: hidden; (not display:none; because we need the image to take the space), and we create another absolute div, that will hold the actual content, that will be right above the image (100% width and 100% height of the common container).
That works perfectly when you first initiate the page, but when you resize the page, the browser doesn't always measure the right width and height again, so you'll need to refresh to make that happened.
Here is the complete HTML:
<div class="Scalable">
<img class="Scaler" src="http://placehold.it/13x10" />
<div class="Content"></div>
</div>
and this simple CSS:
html, body, .Content
{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.Scalable
{
position: relative;
display: inline-block;
height: 100%;
}
.Scaler
{
width: auto;
height: 100%;
margin-bottom: -5px;
visibility: hidden;
}
.Content
{
position: absolute;
top: 0;
background-color: black;
}
Here's a Fiddle (don't forget to refresh after resizing)
I recommend you to copy this code to your local machine and try it there rather then within the fiddle.
In this similar SO question a CSS technique was found and explained on this blog entry that allows an element to adjust its height depending on its width. Here is a repost of the code:
HTML:
<div id="container">
<div id="dummy"></div>
<div id="element">
some text
</div>
</div>
CSS:
#container {
display: inline-block;
position: relative;
width: 50%;
}
#dummy {
margin-top: 75%; /* 4:3 aspect ratio */
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: silver /* show me! */
}
Demo Here
If this is sufficient for you, I'd recommend this technique. However, I'm unaware if the technique can be adapted to handle scenarios where you must have an element adjust its width depending on its height.
You can do it with the help of padding on a parent item, because relative padding (even height-wise) is based on the width of the element.
CSS:
.imageContainer {
position: relative;
width: 25%;
padding-bottom: 25%;
float: left;
height: 0;
}
img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
}
I would like to center some div which has background image. There is problem with response of this div, because if I set width on 80% and height on 80% the bg-image is not on center. I tried everything, but the picture can't just stand on center and if the browser is smaller or bigger this is very big problem.
So if you look at the picture
I want to make this white block responsive.
There is a little of css which I've already written, but for now is non-responsive:
top: 20%;
left: 30%;
display: block;
position: absolute;
background: url(images/background.png) no-repeat;
background-size: 750px 417px;
width: 750px;
height: 417px;
You could use CSS transform:
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
I wanted to do the same thing 2 years ago, there's the solution:
Because you want it responsive, you may use the #media function in CSS3. Like this:
#media (max-width: 480px) {
#div {
top: 50%; /* IMPORTANT */
left: 50%; /* IMPORTANT */
display: block;
position: absolute;
background: url(images/background.png) no-repeat center center;
width: 750px;
height: 417px;
margin-top: -208.5px; /* HALF OF THE HEIGHT */
margin-left: -375px; /* HALF OF THE WIDTH */
}
}
The max-width you use is the maximum width of the device screen. You just copy it and change the width, height, margin-left and margin-top for the image. Also, you should change the background tag!
It will center the image on the page.
You can see an exemple at: Créations MicroWeb - Carrières. The image is totally centered even if you change the window side.
You can add overflow: hidden; on the body to make the page unscrollable when the resolution is too low. Like I did.
EDIT: JSFiddle
Try with auto margins and display as table:
.your-class {
margin-left: auto;
margin-right: auto;
display: table;
}
You can use margin:0 auto; to center a div horizontally as long as its width is less than that of the container div.
Please try this:
img { max-width:100%; max-height:100%; margin:auto; }
.container{display: flex; justify-content: center; align-items: center}
I have used display: inline-block; on element to center and text-align: center; on parent div.