If you are an Adobe Muse user, you have probably had problems trying to center an element to your site. Pinning the element to the center with the Adobe Muse Pin Tool does not really work as you are pinning it to the center of your workspace, and not to the center of the browser.
When we talk about center, we mean center vertically and horizontally. This means that when you scroll down or up, the element remains in the middle of the browser.
Our Absolute Center Widget solves this problem. You can perfectly center images and text on your webpage.
You can set a fixed (stuck, floating) or absolute position:
- Fixed position: widget content will stay always in center, even if you scroll page down.
- Absolute position: widget content will stay in center on page load. If you scroll down, it will move.
HOWTO:
1. Drop widget and resize it as you need.
2. If you just want an image, disable both texts, choose an image and resize widget.
3. You can also set background opacity 0 if you do not want any background color.
4. Try absolute and fixed position to see differences.
NOTE: you should not use this widget more than once time per page.
UPDATE V2: compatible with last Muse version (Sep, 2016).
Please, notice that due to differences between widget resizing in Muse workspace and in Muse preview, image vertical centering may not be as expected.
[button link=”https://responsive-muse.com/demos/widget-absolute-center/” color=”orange” size=”” stretch=”” type=”” shape=”” target=”_blank” title=”” gradient_colors=”|” gradient_hover_colors=”|” accent_color=”” accent_hover_color=”” bevel_color=”” border_width=”1px” icon=”” icon_divider=”yes” icon_position=”center” modal=”” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ alignment=”center” class=”” id=””]PREVIEW[/button]
JamesSprag –
Thank you, I was looking for this
andymedley (verified owner) –
So called responsive ‘always centre’ widget is a complete waste. ‘Stretch to browser width’ does not make it responsive. Especially when there is no control over indenting and spacing the text. poor.
responsive-muse (verified owner) –
Hello, ‘Stretch to browser width’ in a floating always centered block does not make sense.
About text indent and spacing, usually our customers ask us for new features that we add to following updates, sometimes released in a few hours.
We recommend, for our shop and as a lifestyle, letting a seller know what you want before saying that their product is a waste. Some sellers like us still provide solutions to their customers.
ChristianH –
I asked them an update about this widget time ago and they did it, do not take previous review seriously 🙂
nina –
Some users clearly need to properly understand the concept of responsive design.
This widget DOES WORK.
BobbyM –
Widget is exactly in the center! no matter in which screen you view it. Thanks!
JDiesel (verified owner) –
Widget is a bit messy and it’s a long road ahead to perfection, but for something that defies the functionality of muse, not bad.
One thing I would ask is that you could sort the hyperlinking of an image, also the widget appears to always put itself on the top layer, so I can’t even use an invisible box as a kinda link.
responsive-muse (verified owner) –
Hi JDiesel!
Thank you very much for the feedback. We hope to publish and update soon that will add the hyperlink feature.
Regards,
Lukas (verified owner) –
This widget is able to center vertically and horizontally but does not scale image as the browser gets narrow the image size is still the same. We tried to use different breakpoints and to import different size of images. But when used the same widget in different breakpoint with a different image, the widget failed totally.
Any ideas how to fix it? We can not use the same size of the image on all screen sizes.
responsive-muse (verified owner) –
Hi Lukas,
You can try adding this custom CSS to your site and it may scale the images. In Muse, go to Page -> Page Properties -> Metadata -> HTML for Head and paste this Custom CSS
Kind regards,
Nigel (verified owner) –
Hello
I just downloaded your centering widget (for free – thank you very much!). However, I am new to Muse, and I must be doing something wrong, because when I preview the site in a browser, I cannot get the image to remain vertically centered in the browser page, although the widget itself does remain perfectly centered. I have chosen the ‘fixed’ position. If you can help, I’d be most grateful
Kind Regards, Nigel
responsive-muse (verified owner) –
Hi Nigel! Do you have a link that we can check?
Kind regards.