I'm using the following code to vertical center some elements:
.vertical--center{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Also, the parent of this element is always position: relative. This works on every browser I tested except Safari. Is there any workaround or webkit to make this work? If not, which way would be better to vertically center things on Safari ?
Using -webkit-transform: translateY(-50%); did the trick =D
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;
}
I created a featured block with HTML5 and CSS3. This block includes a background-image and some text heading. You can see it live here: http://codepen.io/anon/pen/yNWxBb
As you can see I am now using margin-top to center the text in the vertical middle of the block. And make use of the pseudo-class ::after to add a transparant dark overlay above the background-image.
I know you can vertical align a div using table in combination with table-cell and vertical-align: middle, but than it messed my markup.
Does anyone know how to fix this? And is this the right markup to do this? Or should you recommend an other markup and manner to add the transparant background to the image?
Look out to you answer/advice.
Thank you in advance.
Two possible solutions to your problem:
http://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
And yes, you might want to alter the markup in order to make this possible but both articles I'm pointing you to come with example code.
I do believe this is your solution. Just replace this class in your css and it will work fine I guess.
.features figcaption header {
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: auto;
margin-right: auto;
font-size: 24px;
line-height: 34px;
color: #FFF;
//position: absolute;
//top: 28%;
}
I have a little problem trying to vertically center a child div inside its parent. I'm using this mixin:
#mixin vertical-align {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
But it seems that the "top: 50%" instruction is not working. I think that it may be because the parent div height is set to auto (it only has "min-height: 100%").
Any idea of how I can solve this problem?
Thanks in advance!
Make sure the parent element has position: relative and change your code (the child element to be centered) to position: absolute. That should to the trick. Also take a look at this article on centering in CSS. Hope this helps!
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