How to make objects move vertically in relationship with other objects

Report · Feb 07, 2020

Title says it all. I am experiencing this problem in form of a rectangle with image fill on the left half of the page (width and height responsive), a vector graphic in the center (also fully responsive), and a text field (width responsive only) on the right half of the page. I want them all to have their vertical centers aligned at all times.

Yet when I slide between breakpoints, while the rectangle scales and moves as expected, the vector graphic and the text don't. The text much more intensely than the graphic, but nonetheless - they do not move vertically at the same rate at which the rectangle does.

So my question is this: How can I create a relationship between two or more objects, in which one or more objects follow the positioning of a single key object?

These are the things I have tried: Grouping in various combinations- no success, Grouping with Rectangle Frame aligned to transform origin - no success, pinning - no success. More breakpoints - kind of works but slows down the page immensely and to an unbearable level while ultimately still leaving objects shifting in between breakpoints, so - no success.

Any help would be greatly appreciated. This is driving me mad.

Report · Feb 07, 2020

Vertical centering is possible with modern CSS Flexbox and CSS Grids. Unfortunately, neither are supported by Muse.

If you're interested, I can show you how to do it with code in a real code editor like Dreamweaver or Brackets.

=======================

Muse is EOL. Support for Muse is ending very soon, on Mar 26.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 09, 2020

Hi Nancy,

that would be awesome, thank you for offering. I have some basic dreamweaver and html/css knowledge, but didn't think it would be enough to make it look nice, so I went with Muse in the end.

Cheers,
Mark

Report · Feb 10, 2020

Here's one way. But there are a dozen different ways to do this.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertically Centered, CSS Flexbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
/**Default mobile-first**/
.flex-container {
display:flex;
flex-flow: column nowrap;
background-color: darkslategray;
color:white;
justify-content: space-evenly;
}

.flex-container > div {
width: 95%;
padding: 0.5%;
text-align: center;
font-size: 1.25rem;
border:1px solid aliceblue;
}

/**responsive image**/
.flex-container img { max-width: 100% }

.big-icon {font-size:8rem}

/* Media query for tablets & desktops */
@media only screen and (min-width: 680px) {

.flex-container {
display:flex;
flex-flow: row wrap;
align-items: center;
}

.flex-container > div {
width: 30%;
}
}
/**end of media query**/
</style>
</head>
<body>
<h1>Flexbox Vertically Centered</h1>

<div class="flex-container"><div>
<figure>
<img src="https://dummyimage.com/500x500" alt="placeholder">
<figcaption>Caption</figcaption></figure>
</div>
<div><p class="big-icon">&copy;</p></div>
<div><h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure enim error sit quisquam ut, id, eveniet omnis repellat qui esse nam quae laborum modi voluptatum. Impedit nostrum unde, aliquam molestiae?</p></div>
</div>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Feb 07, 2020

Could you show us an example or a scribble to make sure, that we understand correctly, what yo mean?

Report · Feb 10, 2020

Hi Guenter,

I have since redesigned the page to go without the section that was causing the issue. I would also like to learn how to do it in Dreamweaver, as Nancy has offered earlier, so I think I no longer need your help on this matter.

I am however running into some issues with the footer on my master page, so I will make a post about that if I can't figure it out soon. Perhaps you'll be able and willing to help with that.

Cheers,
Mark

Report · Feb 10, 2020

Fine! Just ask, if you run into an issue! Hopefully we can help!

Adobe Community

How to make objects move vertically in relationship with other objects

1 Correct answer