I have my text positioned in an image with the margin-top: - px in 2 columns.
See it here: http://nlbure-govobanda.savviihq.com/bureau/
I want to know how to center it vertically on every screen? So it automatically scales to the middle of the image, no matter what device.
Hope someone can help me out.
using relative position property and also top:50%, you may do it like this:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Related
I have had a look at a number of the articles on here which seem to provide a fix for most people, apparently except for me.
I am using the following CSS on my website:
/* login page background */
body.function-login {
display:inline-block;
float:none;
vertical-align:middle;
height:100%;
background:transparent url("http://sheqcomply.com/loginbackground.jpg") no-repeat center center fixed;
background-size:contain;
}
No matter what I try I just cannot get the login box to vertically align within the page. I can provide the layout css and page html if needed but havent included it within this post as they are large.
The current code results in this
Thanks in advance
This is what I use often when I have to align things vertically, I position the element at 50% from top and then translate it with -50%. It should work for you too, but it also depends on the other css instructions you have there.
.function-login {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Vertical alignment, a perenial favourite.
One way to achieve this is to have another div around the component. In your example this would be the child of container with class col-md-6 col-md-offset-3. For this you need to add the height: 100vh style. For your actual component div you then add the following style
position: relative;
top: 50%;
transform: translateY(-50%);
There's probably little tweaks you need to do in order to get the "right" alignment for your context, but this should do it.
I'm trying to make a navbar on my site that contains 5 links, but one of them is an image that is in the middle of the group. You can look at the JSFiddle of what I have here: http://jsfiddle.net/kylerm42/fgtLv/4/. I have my header set at 40px tall and am trying to get all the text links centered vertically within the div. The image is taller than the div and should be at the top, with the bottom hanging over.
I've tried vertical-align, line-height set to the height of the div, display: flex; align-items: center;, and anything else I could find online, but nothing works. I've also tried taking the image out of the rest of the header div, and then move it up 40px using position: relative, and that made it look correct visually, but the image's div was covering up the rest of the links, making them unclickable. Any idea how to get this working like it should? Thanks!
You've tried everything but not position: absolute; which is an appropriate way to go for.. In the snippet below, I used left: 50%; to first position the logo in the center but still it isn't centered, so I negated 1/2 the size of the image which is 75px in width so I used -38px
Demo
img#logo-nav {
max-width: 75px;
position: absolute;
left: 50%;
margin-left: -38px;
}
I'm wondering how to go about creating a div with an arrow attached to the bottom pointing downwards. I can achieve that effect like so: http://jsfiddle.net/hyH48/.
However, I'm not sure how to ensure that the arrow is in the centre of the div? In the fiddle, it is positioned using:
left: 20px;
But can I dynamically set this to appear in the centre? Obviously with people viewing the page on different screen resolutions I can't know in advance the integer to put here.
Please help?
If you know how wide the arrow will be, you can do this (fiddle):
left: 50%;
margin-left: -20px; /* -(width/2)px */
Otherwise, you can use transforms with left: 50%:
left: 50%;
transform: translateX(-50%);
What you what to do is add left:50%; and margin-left:20px;to #mybox:after. See http://jsfiddle.net/hyH48/1470/
putting image always in center page(E.x image loading for ajax call), even when move scroll. how is it?
For most browsers, you can use position:fixed
img.centered {
position:fixed;
left: 50%;
top: 50%;
/*
if, for instance, the image is 64x64 pixels,
then "move" it half its width/height to the
top/left by using negative margins
*/
margin-left: -32px;
margin-top: -32px;
}
If the image was, for instance, 40x30 pixels, you'd set margin-left:-20px; margin-top:-15px instead.
Here's a jsfiddle example: http://jsfiddle.net/WnSnj/1/
Please note that position:fixed doesn't work exactly the same in all browsers (though it's ok in all the modern ones). See: http://www.quirksmode.org/css/position.html
<style>
.CenterScreen{
position:fixed;
/*element can move on the screen (only screen, not page)*/
left:50%;top:50%;
/*set the top left corner of the element on the center of the screen*/
transform:translate(-50%,-50%);}
/*reposition element center with screen center*/
z-index:10000;
/*actually, this number is the count of the elements of page plus 1 :)*/
/*if you need that holds the element top of the others. */
</style>
If you add this class your element, it will be always center of the screen.
For example:
Hello world
This might help you : http://skfox.com/2008/04/28/jquery-example-ajax-activity-indicator/
Put the image in a div tag with some class name (centeredImage) and use the following css
div.centeredImage {
margin: 0px auto;
position: fixed;
top: 100px;//whatever you want to set top;
}
Please see this UI sketch image, I have this div in sidebar (black box) on a certain site and as I scroll down or scroll up, I don't want it to hide...I want it to move itself down as I scroll down and move itself up as I scroll back up so that it never hides out. Can you recommend me some jQuery that can get this done? or something else. Please help, thanks.
Don't use jQuery for this please; it's pure CSS.
#MyDiv
{
position: fixed;
top: 10px;
left: 10px;
}
Adjust the exact position to your liking by adjusting top and left. Maybe you want it centered vertically like in the image (if the sketch is accurate in that aspect), in which case you have to deal with all the fun tricks necessary for vertical centering; hopefully in your case something like this would work:
#MyDiv
{
position: fixed;
top: 50%; /* This places the _top_ of the div in the middle of the page. */
left: 10px;
height: 500px;
margin-top: -250px; /* This moves the div upward by half of its height,
thus aligning the middle of the div with the middle
of the page. */
}