I am using a formula method to center the image inside the div.
Here is the link: http://fiddle.jshell.net/bPM73/10/
I don't know what is wrong in the formula, that image is not getting centered.
I mean I want both vertically and horizontally
Please help.
you can made it only with css3 box-align property… working with all browsers (with prefix hack)
http://fiddle.jshell.net/bPM73/28/
#i4 {
display: block;
width:300px;
height:160px;
top:0px;
left: 0px;
right: 0px;
bottom: 0px;
position:absolute;
margin: auto;
}
Here is a trick. You can copy it into your fiddle and see it will works.
I have edited the js and added position:relative to your wrapper div. check this out http://fiddle.jshell.net/bPM73/24/
Related
I have a button html element on my page and want to use the JQuery button so I do
$( "#myButton" ).button();
This works great, but I want to edit the style of the button, namely (as it says in the title) I want to make the button shorter with smaller text and center the text vertically. I've tried
#myButton {
height: 22px;
font-size: 16px !important;
}
And this works in terms of making my button and text the size I want them, but it doesn't center the text vertically in the button. I've tried setting padding-bottom: 2px;, I've tried setting line-height: 22px;, and I've tried setting vertical-align: center;, but none have worked. The button still looks like: Any help would be greatly appreciated. Thanks!
Try to use padding: 0; instead height: 22px; and your height will be defined by your font-size attribute.
Example: https://jsfiddle.net/dmonti/mz8k7kkw/
For centering small elements relative to a parent I usually just use absolute positioning:
HTML
<div>
<span>Process</span>
</div>
CSS
div {
position: relative;
border: 5px solid grey;
background: black;
color: white;
width: 200px;
height: 300px;
}
span {
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}
The important things to note here are that your "Process" element is self-contained (inside it's own span element), and that its parent element's position property is set to relative.
The CSS transform property might look a little confusing, but it essentially keeps the element perfectly centered inside of it's parent, no matter how it's resized.
Fiddle
In my fiddle, you can see how it centers by adjusting the div's height property in the css.
Hope this helps!
Got a link that got a span, inside that span I will from jquery add a number of news. But I want it to be smaller and with a bit of padding so it looks like a notification on a app?
This is the code I got:
<a id="menyNavOptions" href="nyheter.php" >Nyheter<span style="margin-bottom: 30px; font-size: 0.8em;font-weight:bolder ; color: #ff0000!important; line-height:0.3em;" id="outPost"></span></a>
So the look I am going for is a Link with a number on the top right corner
Thanks
display:block won't help, because it will have the full width (100%). Use display:inline-block;
http://jsfiddle.net/M5TKv/
But I'm not sure if Padding bottom will do what you want.
I think you want to do this:
http://jsfiddle.net/M5TKv/1/
Try add display:inline-block in the CSS and it should behave as you expect :)
But I would rather use position relative on the link and position absolute on the span.
.linkclass {
position: relative;
}
.spanclass {
position: absolute;
top: -10px;
right: 0;
}
Add display: inline-block; float: right;
is it possible using jQuery and CSS to split a div in two, and then animate the two parts separately?
To better explain, see this diagram:
Any help would be much appreciated - thanks in advance.
You can fake it with a pair of container divs like this: jsFiddle example.
HTML
<div id="top"><div>Some text here</div></div>
<div id="bottom"><div>Some text here</div></div>
CSS
#top,#bottom {
background: #333;
width:200px;
height:100px;
position:relative;
overflow:hidden;
}
#top div {
position:relative;
top: 90px;
color:#eee;
text-align:center;
}
#bottom div {
position:relative;
top: -10px;
color:#eee;
text-align:center;
}
jQuery
$('#bottom').delay(2000).animate({
bottom: '-200px'
},4000);
$('#top').delay(2000).animate({
top: '-200px'
},4000);
No, you can't show one div like that. But you could duplicate and restrict size to half on each copy, then animate both.
you could make 2 divs, and have each set with overflow:hidden;.
After that, place the text at same position left, but one slightly below it's div and one slightly above so that each text is 'cut' in half. (or this is one work-around to do it)
Take a look at this page I'm working on: http://s361608839.websitehome.co.uk/textcube/
The nav bar is going behind the slider and I wanted it to sit above instead. I've tried setting a high z-index on the #navbar and #navbar-inner and nothing happened.
#navbar{
background: url(../images/nav-bg.png) repeat-x;
height: 55px;
margin: 0;
padding: 0;
z-index: 9999;
}
#navbar-inner{
width: 912px;
margin: 0 auto;
position: relative;
z-index: 9999;
}
I think the javascript slider using CSS style .bx-window and .bx-window are the cause however I have set a low z-index on both, yet I don't see any difference.
Help with this would definately be appeciated.
Cheers
z-index works only with positioned elements (position:absolute, position:relative).
Here's an article http://www.w3.org/TR/CSS2/visuren.html#z-index
In your case, you forgot to add position to one of your element.
Add position:relative to #navbar
It works with either float:... or position:...
How is it possible to center a div both horizontally and vertically with respect to the screen, not the page. So that when the user scrolls down a long page, the div remains horizontally and vertically centered?
Here's a pure CSS solution, note the percentages and negative margins.
http://jsfiddle.net/R7Xy2/
div {
position: fixed;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}
Here is your code
http://www.geekdaily.net/2007/07/04/javascript-cross-browser-window-size-and-centering/
just attach this event to window.onscroll. No need to use jQuery, try this
function addEvent(obj,ev,fn) {
if(obj.addEventListener) obj.addEventListener(ev,fn,false);
else if(obj.attachEvent) obj.attachEvent("on"+ev,fn);
}
addEvent(window,"scroll",yourfunction);
good luck
You may also try the following:
HTML markup:
<div class="classname">text here</div>
CSS:
.classname {
position:absolute;
left:50%;
top:50%;
padding:10px;
border:1px solid #ccc;
}
The border and padding can be changed or removed on the basis of requirement. Also, make sure that the parent container must be positioned relatively, i.e. it should have position:relative.
CSS for the <div>:
position: absolute
left : (centerofpagepixel.x - (width of div /2));
top : (centerofpagepixel.y - (height of div/2));
Set the above using jQuery on the <div>.
You can calculate the centerofpagepixel.x and y using jQuery again. Probably get the width/height of the screen and divide them by 2.