Entry page with centred text

[paulajohnson]

I am banging my head against a wall trying to find a way to make this work.

My client wants the entry page (index page) of her website to be pain grey with 2 lines of text in the centre of the browser window (on all browsers) that you click on to take you into the main site.

I can get my head around making the text link to the rest of the site and can get the rest of the site to work but have no idea how to centre the 2 lines of text so that they will be centred in all browsers.

Any ideas?

Paula

[scrambler]

please provide a link to your page…

[Weaver]

I really can’t understand your question. The index page technically means the default blog page – and that has no provision at all for adding text other than the posts displayed.

If you mean just a couple of lines of centered text on a standard page that is serving as the site’s front page, then this would be done simply by using the Page editor – use the formatting buttons.

If by centered top to bottom as well, there is no good way to do that short of JavaScript.

[scrambler]

Vertical centering could be achieved on variable height browsers if you have the “plus” plugin.

Plus has a page option to force the page to be full browser height. Once that is done, you can add the CSS below in the Per page Style box to vertically center the content area

#content {position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, –50%);
transform: translate(-50%, –50%);}

[paulajohnson]

Thanks Weaver & Scrambler

Sorry, using the term index page was an overhang from my old html days.

Yes I am looking to make text centre top to bottom in the window on a standard page:

http://www.jessicacooper.co.uk/dev/

I am using the plus version so will try Scrambler’s suggestion and feed back.

[paulajohnson]

Yay! Thank you so much.

I have been trying to do this with divs/css/html for a fortnight.

I should have just consulted the oracle to begin with.

(Bows to the superior wisdom)

[Weaver]

I didn’t think of the full browser height option – which does use JavaScript.

So, clever CSS + the full height option gives the result you were looking for.

[scrambler]

Actually if your page is that empty, you did not even need the per page full browser height option.

Hide the entire footer and entire header, then use the CSS below in the per page style box to center the wrapper

#wrapper {position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}

[Author]

Posts