[Pro] Centering a markup item inside an HTML item

Working on a page built inline, I am trying place a markup item (paypal button) centered inside an HTML box. Starting with the curser centered in box I choose insert:markup item but when viewed the markup item is always left justified in the box. What is the trick to get it to appear in the center of the HTML box?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What is the trick to get it to appear in the center of the HTML box?

There are several ways to center items, depending on what kind of items they are. In your case, this depends on what the markup code looks like. A link to your published page code would help.

I also use paypal as seen here so if your markup is similar, it’s likely a form submission. I probably added some elements to the markup-- like the <fieldset> element which I’ve centered in the html <div> item using left/right margin settings of auto:

fieldset { margin-left: auto; margin-right: auto; }

Using Align option from the Text Paragraph pane of the Inspector only works with text-- that’s because the real name of the CSS property is text-align, so aligning things that are not text objects just won’t work that way, even when inserted as inflow items like Markup Items.

Centering objects like containers… specifically, inflow containers… use the left/right margin properties with the auto value to shift these items left, right, or center-- depending on which side gets the value. In Freeway 7, you can align inflow objects using the Measurements pane of the HTML Item Inspector.

Align LEFT = margin-right: auto;
Align RIGHT = margin-left: auto; 
Align CENTER = margin-right: auto; margin-left: auto;

Alignment is always with regard to the item’s parent container, and respectful of other objects in the flow.

Then there are floated items… float right or left. Floats are a whole other thing which have very little to do with whether an object is simply positioned left or right. Don’t use floats for general layout issues.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter, I’m not quite sure where to insert the fieldset element in the markup code, at least where I tried didn’t work. Here is link to the page without anything added to the markup.

http://dev3.appappdesigns.com/donations.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

http://dev3.appappdesigns.com/donations.html

Thanks for sharing the link.

###important
We can center the Paypal link on the <form> element… but first, you are building this inflow (inline, as you said) BUT you are using defined heights for the containers instead of flexible heights… this is causing all kinds of grief as the page width is changed. You should change them right away.

###now, the fix
We will add an id attribute to your markup code so it will now look like this…

<form id="form-paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
	<input type="hidden" name="cmd" value="_s-xclick">
	<input type="hidden" name="hosted_button_id" value="8137554">
	<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
	<img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Next, we want to make a new Tag Style in the Style Editor. Open the Editor (menu Edit > Styles) and click the New Style button (+) and in the Tag field name it

#form-paypal

make sure the Name field stays blank. Then open the Extended style window and add the following three style property/value pairs

name: width
value: intrinsic

name: margin-left
value: auto

name: margin-right
value: auto

Freeway will take that and create the following CSS rule:

#form-paypal {
width: intrinsic;
margin-left: auto;
margin-right: auto;
}

That will center your Paypal button within the Column4 container.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Perfect Walter! Thank you again and Happy Easter!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Sorry to be a pest Walter, but the page seems to work fine in Safari and Chrome but not in Firefox.

http://dev3.appappdesigns.com/donations.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, 2 things now.

First, I thought there was only one paypal button-- now I understand there are a host of them so we will have to change from an id tag style to a class style.

So, the paypal markup should change to read:

<form class="form-paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="8137554">
    <input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
    <img alt="" border="0" src="https://www.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Next, go to the Style Editor and let’s change the name of our Tag style from #form-paypal to

.form-paypal

with the leading period instead of the hash.

Now open the Extended style window and delete the width:intrinsic declaration and add these two instead:

name: width
value: -webkit-fit-content

name: width
value: -moz-fit-content

This will cover Safari, Firefox and Chrome. Sadly, no version of IE yet honors intrinsic values.

###if you really must support internet explorer…

Then a better way to go would be to replace all the extended width declarations with

name: display
value: table

leaving the margin settings as they are.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Perfect Walter! Thank you again and Happy Easter!

And thanks to Ernie too for sharing that helpful tip.

D :wink:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

OK that’s got it, and sorry about thanking Walter :slight_smile:
Thanks Ernie!!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

You might want to go through your site and do some spell checking - Novemeber - and - sent correclty

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Got it, thanks :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options