This is demo: Demo
The demo will work only on webkit browsers, (chrome or safari)
There are four box, each have a title. When users clicks to expand the div. The div is made to expand. Initially the title is in left, but when the div is expanded the title must move to center with animation.I have made the div to align center using padding, but there is a problem, that for varying text-width the padding has to be changed to make the title properly centered. Please take a look at the code, you will understand it better
Remove the padding, center the title on the h3 and try to animate the width of the title between auto and 100%; Use the nowrap to make sure the title stays on one line.
h3 {
text-align: center;
width: auto;
white-space: nowrap;
...
}
Then animate to
.expand h3 {
width: 100%;
}
Related
I am working on a Lightbox (tutorial), a div container which opens on a click.
This div container isn´t displayed and is located under the click element.
Now i tried to center it vertical but withouth success.
Found some other questions here on Stackoverflow, but no one worked for me, like this.
$(window).resize(function() {
$(".modal-box").css({
top: (($(window).height() - $(".modal-box").outerHeight() / 2) + $(window).scrollTop() + "px")
});
});
The problem is: At the beginning the div is almost out of the bottem screen and divs below gone out of top screen.
I would have each div in the middle of the screen, no matter of the position.
As #Rakesh commented on the question, this can be done with CSS alone; see this fiddle https://jsfiddle.net/xc2vrghx/1/
You have to use 2 div's.
Outer one with full 100% width/height, absolutely positioned, display set to table & alignments to center & middle - like this:
display: table;
min-width: 100%;
min-height: 100%;
position:absolute;
The the inner div (which is your centered container) must have css display set to table-cell, and give center & middle alignments to this container:
display: table-cell;
vertical-align: middle;
text-align: center;
place whatever you want inside this; fiddle example contains additional html inside this middle container to show as example.
CSS display property's table & table-cell values are playing the magic role here. http://colintoh.com/blog/display-table-anti-hero is a very good article to understand
I looked at many answers here on SO but none worked for me.
Below are the posts I have looked before posting this question.
jquery fixed div on scroll-down
jquery fixed div on scroll, smooth movement
jquery fixed div on scroll, bottom boundary
How to manage css left property for fixed div
fixed div position on scroll is not working in all conditions
Absolute DIV inside a relative DIV inside a fixed Div disappears on scroll
Sticking a fixed div on scrolling down
For this purpose I have created a fiddle that shows my problem :
jsfiddle demo here
My problem there is the login span disappearing on zooming (I can't see it on scroll right)
#fixedContainer
{
background-color: #ddd;
position: fixed;
width: 500px;
height: 100px;
top: 0px;
margin-left: 20px;
}
.login
{
float: right;
}
I would prefer a CSS solution but am OK with a Javascript solution too.
Add these css attributes to your #fixedContainer selector:
overflow-x: auto;
max-width: 100%;
Is there a way I can automatically center a text, and auto crop the left/right sides from it when resized viewport gets smaller?
So it ALWAYS is centered on screen, no matter how much it goes over the viewport size
I'm thinking css or jquery/javascript. But preferably css only, if possible
HTML:
<div class="headline">
<p>============ HERE IS SOME TEXT ============</p>
</div>
CSS:
.headline {
?
}
.headline p {
?
}
Set a particular width to the text element along with text-align:center and add overflow:hidden to the body. That should be enough.
Just tried negative margins + nowrap. It works ok for now. Crops left/right + keeps centered
text-align: center;
white-space: nowrap;
margin: 0 -500px;
I tried this, it might work for you...Try moving the preview pane left and right and see if it suits you :
http://jsfiddle.net/SaM2Z/
You just needed this :
#<id-of-div> {
text-align: center;
margin : 20px;
width : 1280px;
}
I have a list of post on a WordPress website that has an excerpt and an image. Each on in a column. One floated left, one floated right.
What I want to achieve is to alternate each post so that the first has a left aligned image, and right aligned text; then the second has a right aligned image and left aligned text, and then the next, left aligned image, right aligned text.
Perhaps there is a PhP or JS/Jquery way of doing this?
*Please see image so you can see what I mean.
There is also a basic HTML/CSS JSFiddle here: jsfiddle.net/huwrowlands/7WGTm/
Thanks
Now try to this
Used to pseudo-classes :nth-child(even) in your css define this in parents div as like this
.hp-module:nth-child(even) > .col:first-child{
float:right;
}
Demo
more about nth-child
CSS3 Pseudo (odd,even)
Using the new pseudo class :nth-child(odd) or :nth-child(even) it's very easy.
.hp-module {
width: 100%;
}
.col{
width: 46%;
padding: 2%;
float: right;
text-align: center;
}
.hp-module:nth-child(odd)>div{
float:left;
}
Demo
http://jsfiddle.net/7WGTm/3/
I've looked this up and the outlook seems bleak. I'm not interested in using a table. I have 6 or so 'a element' inline-blocks that make up a menu. It's slick, except all the 'a elements' are set to width: auto; to accommodate their text. Without an explicit width, I'm not able to center align them. I have a container div and a child div that wraps around my 'a elements'.
Any thoughts?
Thanks
Mike
You could set the style of the a element to margin: 0 auto, but that doesn't work in IE6. In IE6, you should set the wrapper div to text-align: center, and (optionally) set the text-alignment for the a element back to text-align: left
<div style="width: auto; margin-left: auto; margin-right: auto">
div content
</div>
will align center on the page
the div element will take all the width space of the container element if it isn't set a width value.
So if you want to center a div you must set a width...
A solution to your problem (if I have understand it) can be:
<div style="text-align:center;"><span>[... yours content ...]</span></div>
where your div has became a span and a new div puts the span in the center.
Hope this can help you!
Bye,
Alberto
My advice is this answer - however someone commented that it wouldn't work in IE6. Here's how to make this work:
<div id="container">
<div id="centeredBlock">centered</div>
</div>
#container {
text-align: center;
}
#centeredBlock {
margin: 0 auto;
text-align: left;
width: 50%;
}
You need to set margin: 0 auto; on the outer container div, add text-align: center; on the inner div; and use an unordered list to build your menu in the first place.
Without setting an explicit width, the <div> tag will automatically expand to 100% of the width of its parent. Therefore, setting margin: 0 auto; will make it center -- with 0px on both the left and right.
here a nice workaround for centering a div with no width:
http://www.kensfi.com/how-to-align-center-a-div-with-no-width-declared/
Here is also a good example for the situation: http://www.cssplay.co.uk/menus/centered.html
If you need it centered and dynamically shrinking/expanding to accommodate the content without knowing the width, then your only option really is using a table. It is the only elastic element in HTML repertoire.
<table style="margin-left:auto;margin-right:auto;">
<tr>
<td>
Whatever...
</td>
</tr>
</table>
P.S. You can have a div to shrink dynamically as well by setting the float property to float:left or float:right. So it will stick to the left or the right, but you can't have it centered this way.