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
Related
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'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
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%);
}
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
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 8 years ago.
I have a css class defined so I can make a div to use all the browser's viewport, the rule is the following:
.fullscreenDiv {
background-color: #e8e8e8;
width: 100%;
height: auto;
bottom: 0px;
top: 0px;
left: 0;
position: absolute;
}
Now I want the text inside the div to be in the exact center of the screen so, vertical align center and horizontal align middle, but I can't seem to find the proper way to do so.
It only needs to work on webkit based browsers.
I already tried to add a P element inside with display set to table-cell (a common way of centering text) without luck.
Any suggestions?
The accepted answer works, but if:
you don't know the content's dimensions
the content is dynamic
you want to be future proof
use this:
.centered {
position: fixed; /* or absolute */
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
More information about centering content in this excellent CSS-Tricks article.
Also, if you don't need to support old browsers: a flex-box makes this a piece of cake:
.center{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
Another great guide about flexboxs from CSS Tricks; http://css-tricks.com/snippets/css/a-guide-to-flexbox/
The standard approach is to give the centered element fixed dimensions, and place it absolutely:
<div class='fullscreenDiv'>
<div class="center">Hello World</div>
</div>
.center {
position: absolute;
width: 100px;
height: 50px;
top: 50%;
left: 50%;
margin-left: -50px; /* margin is -0.5 * dimension */
margin-top: -25px;
}
DEMO
There is no pure CSS solution to this classical problem.
If you want to achieve this, you have two solutions:
Using a table (ugly, non semantic, but the only way to vertically align things that are not a single line of text)
Listening to window.resize and absolute positionning
EDIT: when I say that there is no solution, I take as an hypothesis that you don't know in advance the size of the block to center. If you know it, paislee's solution is very good
text-align: center will center it horizontally as for vertically put it in a span and give it a css of margin:auto 0; (you will probably also have to give the span a display: block property)