Ambiera ForumDiscussions, Help and Support. |
|
|
|||||
|
In the Masterpage I have a footer and would like everything in that container centered vertically. In the element browser, I find a master container, and there is no center in verticle alignment. My thought process is that since this is a single line within each of the containers, it would be easier to do it here than with every element contained in each container How can I accomplish this? Would I add code with the pro version to do this? Would this be an attribute of the top container and inherited by the child containers within it? Are the properties of elements in the Pro version more robust? Before I buy the Pro version, I can edit the code directly... Placing the code and CSS inline exactly where I want it? |
||||
|
Wouldn't it be easier to place the cursor into that container and click the "center text" button? I think everything, not only text would be centered then. But maybe I don't understand the problem exactly. |
||||
|
You don't need extra code to accomplish this. Just click the container to open its properties. For centering the container content vertically, enter same top and bottom Padding values (the order is top, right, bottom, left). Also, set the container's MinHeight either to none or to a very low value, e.g. 5. This is to ensure that the container's minimum height is not larger than the sum of top padding, height of content, and bottom padding. The settings will not be inherited by child containers. You will have to adjust each child container's properties accordingly. |
||||
|
So i have social media icons and text in the same container. While the icons line up, the text box does not. I want to space the icon out evenly. Since there are 4 icons and text, would it be better to create a container with 5 boxes? 4 for the icons and 1 for the text? |
||||
|
You could use each element's Margin setting (top and/or bottom) to line them up nicely. |
||||
|
If you upgraded to RocketCake Pro you could use additional CSS styles to vertically center content elements (e.g. icons, text boxes) within a parent container. -> right-click the content element -> select HTML Code -> select Additional CSS styles -> copy & paste this code into the white field, with a blank before and after position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%);-> click OK -> click Preview to see how it looks -> do so for the other elements |
||||
|
This is the structure: [ <div id="container_54323429"> TOP LEVEL CONTAINER is there where the new code goes? <div id="container_54323429_padding" > <div class="textstyle1"> <div id="container_3c70b732"> <div id="container_3c70b732_padding" > <div class="textstyle1"> <img src="rc_images/email_icon.png" width="752" height="696" id="img_5a940f7f" alt="" title="" /> When adding the code from the previous comment, ************************************************* -> right-click the content element -> select HTML Code -> select Additional CSS styles -> copy & paste this code into the white field, with a blank before and after position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); -> click OK -> click Preview to see how it looks -> do so for the other elements ************************************************* the placeholder above it shows none of this structure. Removing it allows the structure to be PREVIEWED correctly. |
||||
|
No, only to the child elements. |
||||
|
So, if I understand, it is not applied to the container element but to each element contained in the container. for example each picture element and each text element? |
||||
|
Yes, correct. |
||||
|
|
){kind=link}