Can you solve this challenge?

[Brightonmike]

http://beta.jetbookingdirect.com/?page_id=130

How do I get the text inside each div slide to be centre aligned relative to the browser window?

Absolute positioning does not work.

Ideas?

[Josh]

I was able to get this http://postimage.org/image/alii8p50/

This is how i did it…

ul#securityslide li h2 {

font-family: 'Dancing Script', cursive;

padding:45px;

color:#fff;

font-size:60px;

width: 100%;

text-align: center;

}

…AND…

ul#securityslide li p {

padding:45px;

color:#fff;

font-size:17px;

text-align:left;

width:600px;

display: block;

margin-left:  450px;

}

Hope this helps.

[Brightonmike]

That doesn’t work.

You’re centering the text within the slider, but not within the window.

I think this needs javascript.

[Brightonmike]

jQuery seems to be the best idea here.

$(function() {

if($(document).width() <= $(window).width()) {

$('h2').css({ 'width': ($(window).width()) });

$(window).resize(function(){

$('h2').css({ 'width': ($(window).width()) });

});

}

});

[rtmedia]

remove text-align: center; from ul#securityslide li h2 {

and that’s all you need to do

[Author]

Posts