How can I get these paragraphs to vertically align?

Question

I'm using jquery cycle to fade between a few slides. These slides are of a fixed height but they contain p tags that contain text of varying lengths. I've created this jsfiddle to show you what I mean.

The problem I'm having is that I want the p tags within these slides to be vertically aligned - I want the copy to sit nicely in the center of the div. Usually when working with dynamic content like this, I'd put the p tags in a wrapper, then calculate the height of the wrapper on page load using js and position accordingly (which is why I've tagged this as javascript - I may need to use it for the solution if I can't use css).

Anyway the reason I can't seem to use js is because the p tags are within hidden panels. I can only access the size of the elements once the parent becomes visible which means I'd no doubt have to set up a callback just after a slide is made visible to do the positioning then. The downside of that is the content will jump while the js calculates the position.

One solution would be to use a table with vertical-align in the table cell, but I'm not sure it'd be semantically correct to put p tags within a td? (someone correct me if I'm wrong). Is there a purely css solution I can use here, that'll also work in ie7?

Here is the html I have:

<script src="http://ajax.aspnetcdn.com/ajax/jquery.cycle/2.99/jquery.cycle.all.js"></script>
<div id="cycle-wrapper">
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper.</p>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
    </div>
</div>

The css:

#cycle-wrapper { width: 340px; height: 300px; border: 2px solid red; }
#cycle-wrapper div { width: 340px; height: 300px; text-align: center; }

The script:

$(function() {
    $('#cycle-wrapper').cycle(); 
});

Thanks

EDIT: I have got it working with tables here but I'd love to find a purely css solution if possible!

As suggested by @Onimusha in comments to my answer below, its not working on chrome....so `!important` tag is the key i guess....check these links http://stackoverflow.com/questions/7390192/stop-jquery-cycle-from-setting-displaynone AND http://stackoverflow.com/questions/10338413/can-you-stop-jquery-cycle-from-overwriting-inline-absolute-position ....it might help u out! :) — NoobEditor, Nov 29 '13 at 10:37

NoobEditor · Answer 1 · 2013-11-29T10:25:52.007

PURE CSS WAY

Not sure i understand your req. but i think this achieves what you want,
one way of doing it would be to push the upper-most div using margin-top to the middle of parent div, which will automatically push the other div below it!

DEMO : http://jsfiddle.net/logintomyk/YTZYQ/

HTML

<div class="divCent">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra.</p>
</div>
<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem vitae arcu dictum, quis dictum arcu cursus.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut placerat dolor. Maecenas tempor nunc eu justo venenatis ullamcorper. Vestibulum ac turpis id quam dapibus adipiscing. Donec semper turpis at tortor tincidunt viverra. Praesent iaculis sem

CSS

#cycle-wrapper .divCent { width: 340px; height: 300px; text-align: center;

    margin-top:25% /* this is what i added **/

}

EDIT

After comments from Onimusha, here is another fiddle, implemented on his link http://jsfiddle.net/logintomyk/7AJy5/1/

@Onimusha : i just posted on how to center the div vertically,approx margin user can place as per his needs....also, my fiddle is not executing any JS! :) — NoobEditor, Nov 29 '13 at 10:14
I know, but it's important to run the JS because that it what's causing it to not align vertically. The JS gives the divisions css of `top` and `left` :) — Onimusha, Nov 29 '13 at 10:18
@Onimusha : here you go : http://jsfiddle.net/logintomyk/7AJy5/1/, amended the CSS and looks perfectly fine to me...ur opinion??? :) — NoobEditor, Nov 29 '13 at 10:23
it's still aligned at the top on Chrome. I started fiddling thinking it's simple but as I said, jquery cycle() overwrites most of the css. Tough one this — Onimusha, Nov 29 '13 at 10:26

score 0 · Answer 2 · answered Nov 29 '13 at 10:13

0

You can make your <p> visible only after the alignment has been calculated, so there is no "jumping" paragraph.

answered Nov 29 '13 at 10:13

mastazi

1,623
26
41

But I think the p has to be visible BEFORE the alignment can be calculated – alimac83 Nov 29 '13 at 10:14
You are right, I haven't thought of that, obviously you need the `
`'s height so it must be visible.
– mastazi Nov 29 '13 at 10:52
1

However if you use `visibility:hidden` instead of `display:none` you should be able to get the paragraph's height with JS, as the element still takes up its space on the page even though it's not visible. – mastazi Nov 29 '13 at 10:58

Tom Chung · Answer 3 · 2013-11-29T10:23:30.720

If you don't mind use the css display property and add separating elements,

Check my perfect version on http://jsfiddle.net/m29uu/3/

#cycle-wrapper {
    width: 340px;
    height: 300px;
    border: 2px solid red;
    display:table;
}
#cycle-wrapper p {
    width: 340px;
    height: 150px;
    display:table-row;
}
#cycle-wrapper span {
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}

score 0 · Answer 4 · edited Jun 20 '20 at 09:12

0

Quick CSS Solution

Add the following css

#cycle-wrapper div > div {
    display: table-cell;
    vertical-align: middle;
}

and add a second div wrapper around the paragraph tags for the new css to apply to. It worked on the fiddle.

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 29 '13 at 10:19

deanharber

53
8

My first thought was the same as yours, but after i tried on jsfiddle, it simply doesn't work. – Tom Chung Nov 29 '13 at 10:25
Cycle keeps changing the display property to hide and show the element. – deanharber Nov 29 '13 at 10:30

score 0 · Answer 5 · answered Nov 29 '13 at 11:37

See this link http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

It is possible to vertically center without the jQuery cycle element. But when the plugin is added the alignment was not proper. I am not very much aware of this plugin but try changing the default options as mentioned in jQuery Cycle Plugin's option reference.

TheDean · Answer 6 · 2013-11-29T10:25:15.163

-1

your Div have id "cycle-wrapper". and all the paragraph within this Div..

use

               $("#cycle-wrapper").css("vertical-align:middle");


          you can apply any css like the following way

               $("element").css("propertyname","value");

Set multiple properties and values:

                 $(selector).css({property:value, property:value, ...})

edited Nov 29 '13 at 10:25

answered Nov 29 '13 at 10:05

TheDean

275
1
5
16

`but I'd love to find a purely css solution if possible` this isn't pure css nor does it solve the question – Onimusha Nov 29 '13 at 10:09
then you can use CSS #cycle-wrapper{ vertical-align:text-top; } – TheDean Nov 29 '13 at 10:09

How can I get these paragraphs to vertically align?

6 Answers6

Quick CSS Solution