How do you center objects and or a website vertically and horizontally in Muse?

[anthonystewart]

http://kelsdapoet.com is the site I'm working on.  Any ideas would be greatly appreciated.

Thanks in advance

[Guest · Accepted solution]

If you have Smart Guides turned on, you will see visual guides which indicate when an element is centered on the page while dragging the element. The red lines indicate the element is centered horizontally/vertically on the page:

To center your site horizontally in the browser window, go to File > Site Properties and check the Center Horizontally checkbox.

Muse does not offer the ability to center a page vertically within the browser window.

[dswinson1]

I'm having the same sorta problem. When I view my site on an ipad, its completely flush left. Is there a way to design the site to also fit an ipad?

[iamDK]

While Muse sites can be technically seem on ios browsers they are not yet optimized for them. Keep a look out on new features. Responsive design is one of the most requested features so I have high hopes we will be seeing it sooner than later.

[Johnklungers]

Is responsive design to expected soon?

[ianloh123]

Hi everyone!

I'm just wondering if this feature has been addressed in the latest update.

I'm referring more to the centering of my site in a browser window that is smaller than my site width. I'm totally fine with auto scroll bars, however i would like my site to be centered at least when it loads. Is that even possible if the browser width is smaller than my page width? 

Or is there some code i can insert in the page properties metadata? I currently have one line in there to make the page load from the bottom.

thx!

ian

[Elnora11]

Hey ianloh123 did you find a solution to your problem? I have the same.

When my page is loaded on a small screen it's also too far to the left. I tried making my page smaller and then putting my background image in on "browser fill" but then i can't decide where the background image should be positioned... I guess I need to edit the background image in photoshop then to make it fit, would just be easier in Muse.

[jonathanraydesign]

this requires you to edit the css files that muse creates. Simply open your css file in dreamweaver for example (or any other code editor if you're familiar enough) for each page, find the #page element and insert the margin rule.

margin: 0 auto;

unfortunately since muse doesn't have this function for whatever reason, you'll have to do this for each page, and if you make any changes, you'll have to do this again after you re-export your muse html, css, etc. files to upload to your hosting service on the web.

Since adobe hasn't quite gotten this program 100% right I mainly use it as a tool for generating the skeleton of the website quickly and then I export those pages into html and css and edit their code, it simply cuts out a bunch of annoying coding at the start, and then allows me to focus on the more difficult tasks such as interactive elements, galleries, flash modules, etc.

Hope this helps

[alexandreperrotta]

a solution for you, guys!

https://widgets.mu/se/CenterPage/demo/

[ianloh123]

Awesome share, thx alexandreperrotta‌! I haven't tried it but if it works as the description says then this should be the sauce we've been waiting for

[ConnectCreative]

Did you have any luck with this? I've tried the Center page widget to no avail.

Neil.

[JAMelton]

Same here Neil. This is driving me nuts! I'm trying to create a hero page, but want the content to center with the responsive design, but can't seem to get it to work.

Anyone have any fixes for this?

[ConnectCreative]

I had to resort to using this COVER VIDEO which strangely enough has a centre content option. You can see it in action on their homepage. By no means a full solution but it will have to do. If you do end up using it, I wouldn't recommend joining, I'd just purchase the widget. I've had less than favourable service from 123Muse.

I must admit, I'm amazed such a straightforward request has not been solved with a widget release. I'm even more amazed its not part of the new responsive toolset!

If I find a better solution I'll post back here.

[pets]

i can center my central layout for the TFT screen, but when i view it on my iphone 6 plus or ipad, its not centered.

is there any solution? i am using responsive design

thanks

[Tim Jolly]

Hi all,

Look's like a widget is finally available to solve this, from QooQee Vertical Positioning Muse Widget. Requires an 'ultimate pass' to purchase it which is a bit of a pain, though if it works it's tempting. Anybody out there already subscribe who could test it out?

Cheers, and thanks for the support!

[ConnectCreative]

Thanks for the heads-up. I'd spotted that too, just a bummer its available from Qooqee, probably the last widget vendor I'd use

The search continues....!

[yegor.trukhin@gmail.com]

Hello ConnectCreative, did you find a solution?

Thanks

[ConnectCreative]

Afraid not, no.

[pets]

i wonder, why such a simple and basic request is not part of muse initially.

i have one object on a blank white page / site to always stay in the optical middle of any screen size/device.

i tried it with pinning / make empty boxes and group them with the object, but it wont work to stay always in the middle, horizontally and vertically, (muse 2017.0.0.149) so i have to buy this quooquee widget now, which works great?

[Tim Jolly]

I agree, it baffles me why vertical responsiveness isn't a feature yet.

With regards to QooQee's Vertical Positioning Widget however, I did bite the bullet and get it as I really had no other options for what I wanted to achieve. I've not tested the widget on a published site yet but all my browser tests show that it works, with single or multiple elements on a page all doing their respective things, and across breakpoints too.

In my case I have three different elements in the center of a page I want to act as one, that would responsively center themselves to any screen size. One is simply a line of text, one a Muse composition widget that opens up an embedded video on trigger click, and one an animated scrolling text (one of Muse-Themes widgets). I simply dropped them all in an empty state button and applied the VP widget to the state button. Seems to work fine.

I'll post a link once the site is live if anyone is interested to see it in action.

Cheers,

[pets]

thats great for you. i didnt want to spend the 89$, and i think my situation is quite simpler than yours, so i played around

and found a workaround, which works better but not perfect:

- align object which has to be centered always horizontally and vertically

- make an empty box with rectangular box tool, and set it to x:0 and y: "snap to your object´s upper border", box width = widest px size of your site

- try scrubbing your site with lever and see what happens, it works to center the object vertically ! not for all devices, but for most.

i am still trying out to find the portrait pixel size of iphone 7 plus, some say 414 px, but its not centered vertically in the asthetical middle at 414 px, its very low down

[yegor.trukhin@gmail.com]

Check Muse for You website, they have Widget for this, you can buy it separately, no need subscription.

And support is just the best, not like Qooqee's questions in a hole.

[Pavel_Homeriki]

This is not such a simple matter, as it seems. Qooqee offers a solution using javascript. This approach is not rational to integrate as part of the visual website builder software package. Solutions that are in pure CSS are not cross-browser compatibility. Therefore Muse team does not integrate their. But you can independently and easily achieve this by using the custom css code, if you will become a little bit to learn. This is not difficult

[self-taught-nut]

More than a year from the last post on this subject and I find a similar problem.  My site was centering fine until I added a third sibling page. Same basic layout as the others but now they all are flush left instead of centered.

It's late. Maybe I did something to spoil what was working, but I don't think so. Which Muse for You widget addresses this?

[fotoroeder]

Could you try to give some more detailed information?

If you ask for a specific museforyou widget you should directly ask museforyou, I guess.

Best Regards,

Uwe