How can I put text in the middle of the screen?

Question

I'd like to position a line of text at the center of the page. Last time you guys helped me use this custom style:

.center {
	text-align: center;
}

This worked like a charm. But then I decided I wanted the sidebar removed, so I found this css online and put it in the stylesheet:

#ui-bar {
	display: none;
}

Now the sidebar is gone, but the text still acts as if the sidebar was there, so the center text is placed between where the sidebar would be and the end of the page.

I'm okay with the position of normal text, but I'd like the center text to be placed at the very center of the page rather than at this offset. Any help would be appreciated.

Answer 1

You shouldn't be using that CSS if you want to permanently hide the Sugar Sidebar, the correct way to do that is call the UIBar.destroy() function within your Story Javascript area like so.

UIBar.destroy();

Using just display: none; to hide the Sidebar doesn't adjust the default CSS of the other story elements to handle it's removal.

EDIT: The Passage area will still appear with large empty areas to the left an right because the #passages element has a default max-width of 54em and automatically calculated margin-left & margin-right attributes which centres the Passage area.

Comments

Thanks, didn't know you could destroy the bar like that. When I did that though, the passage still wasn't centered. It moved all the way to the left, and the center text still has an offset.

---

That didn't happen to me.

Can you supple an example of that Passage, and the contents of your Story Stylesheet & Story Javascript areas?

---

Nevermind I found the issue, I set passages to position:absolute and that seemed to mess it up.

#passages {
	position: absolute;
}

It works now, thanks!