The problem example can be seen here http://codepen.io/anon/pen/EDgiz.
As you can see, a square(1:1) proportion element is positioned perfectly fine. But two others - not.
Is there a pure CSS solution for such cases?
If not, what can you propose as gentle solution? Because I actually can position those with javascript manually, but i think that's more or less - dirty solution.
Just found a very delicate solution here: http://www.paulund.co.uk/absolute-center-images-with-css, using transform: translate() function
So my final example looks like this - http://codepen.io/anon/pen/EDgiz:
img{
position: absolute;
max-width: 100%;
max-height: 100%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
Works Awesome for me
Related
I have a popup to which I apply these properties:
position: absolute;
top: 50%;
left: 50%;
width: 80%;
max-width: 700px;
height: 80%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
While this works perfectly on Chrome, I get a strange issue on Safari. Basically as soon as the popup changes size the rendering/graphics of the element move away from its real position. Here's a photo that might help understand better this weird behaviour.
So the popup is perfectly centered, as well as all its child elements, but the render/graphics are somehow translated. For instance, if I want to click on the X to close the popup I have to click on the "supposed" position (the one highlighted in blue in the picture) and not the "visible/rendered" one.
Is there any solution to this issue?
You can set content in a <center></center> or add attribute like this:
div.popup.project.dark{
text-align: center;
}
Well, that's it. I have some pop ups in my website, and I want them centered in the div that contains it. As I said before, the pop ups' height is set in auto; because each one has a different contain...
Can you help me?
I got it, thanks anyways. I hope this information could help someone else
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I am looking for a way ONLY in CSS to adjust the height of a container <div> tag whenever one of its children have been rotated. I am very much aware (and can totally implement) a solution for this using JavaScript, but I was hoping to find a CSS solution.
This fiddle shows my quandary: http://jsfiddle.net/spryno724/yX56u/
HTML:
<div class="container">
<p>Test</p>
<img class="rotate" src="https://tse1.mm.bing.net/th?id=HN.608054218431465781&pid=1.7" />
</div>
CSS:
.container {
border: 1px solid red;
overflow: auto;
position: relative;
width: 100%;
}
.rotate {
-moz-transform: rotateZ(45deg);
-ms-transform: rotateZ(45deg);
-o-transform: rotateZ(45deg);
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
position: absolute;
top: 160px;
}
Does anyone have any insight as to how to have the container automatically adjust its height regardless of the rotated object's natural height or rotation amount?
Personally I don't think it can be done with pure css. To calculate the height of the container you would need to do something like this:
heightContainer = sin(angleImg) * (widthImg + heightImg)
And that is something that just can't be done in pure css. You could use Javascript inside the css, or use something like Less to generate the code. But putting js inside your css is just awful (that's what you have js files for). And the Less solution would require set values for the angle and dimensions, and if those would be fixed you could just set the container height fixed as well...
Other then calculating the height, I don't see any solutions that could work. Making the img relative again won't help, since the transform won't be taken into account. And I tried playing with the answer to this related question (which is quite clever), but I don't think it can be applied to your case.
So imo: No, it can't be done with pure css But I would love to see someone prove me wrong!
I've got an absolutely positioned child inside a relatively positioned parent. The child is supposed to appear vertically centered next to the parent. See this jsFiddle: http://jsfiddle.net/wAY3T/
The problem is that both the parent's and the child's heights are unknown at design-time, so I tried using percentages with the negative margin method, but the outcome goes completely insane and I can't figure out what's wrong with my code.
HTML:
<div class=parent>
<div class=child>Absolute div</div>
Some content of the parent
</div>
CSS:
.parent {
position: relative;
}
.child {
position: absolute;
right: 100%;
top: 50%;
margin-top: -50%;
}
The child then displays somewhere far on top of the parent, even though the code looks like it would vertically center it. In the fiddle, the -50% margin calculates to -112px. WTF?
If you have any idea what's going on, please help me. I've been struggling for hours.
Percentage margin is always relative to the containing block's width, so this won't work like you expect.
If you're open to an alternative, I suggest instead using:
.parent {
position: relative;
}
.child {
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
position: absolute;
right: 100%;
top: 50%;
}
Updated fiddle (this is supported quite well except for IE8)
I have been using back button in jquery mobile page what i need is to vertically align the back button. in the header
Thanks in advance
You can check this web site for the answer (as well as detailed explanation of the problem with vertical alignment): http://phrogz.net/css/vertical-align/index.html
Modify the top value using the following css rule.
.ui-header .ui-btn-left {
top: 0.6em;/*Adjust this value*/
}
There's another stackoverflow post that seems related to your question. It includes a workable solution (elegant and not too hackish). Nevertheless, I hope the jQuery Mobile folks (bless their hearts) make a standard way to specify vertical alignment in any table or grid.
Stackoverflow Post 8280637
I know, its old task but... I have to classes to make this.
One for just vertically center something, one for vertically and horizontally:
.h-centered-item {
position: absolute;
top: 50%;
transform: translate(0, -50%)
}
.vh-centered-item {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
Just apply it to the element you want to center vertically or both