Help - Search - Members - Calendar
Full Version: How to centre two buttons horizontally
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
PamAtNZ

I want to centre two buttons horizontally on my choir webpage - with maybe 100 pixels between.

[ Join Us ] [ Book Us ]

I have limited knowledge in markup and I have limited ability to edit the pages - because of the web subscription I have with the site provider. They provide area within the body but I can't access the CSS sheets. (not that I am very skilled in that area either)

I have two images to use for the buttons which I want to link to two other pages at the site.
My page is responsive and I want the buttons to adjust as necessary to monitor or phone.

I've tried using style but when I look at it in Safari - they end up underneath each other.

I just can't seem to do it - can anyone help?



Christian J
QUOTE(PamAtNZ @ Nov 27 2018, 09:42 AM) *

I have limited ability to edit the pages - because of the web subscription I have with the site provider. They provide area within the body but I can't access the CSS sheets.

It should still be possible to do with inline styles (using the STYLE attribute). But if there's an existing stylesheet from the site provider it may conflict.

QUOTE
I have two images to use for the buttons which I want to link to two other pages at the site.
My page is responsive and I want the buttons to adjust as necessary to monitor or phone.

You should be able to float the two buttons with CSS, that way they'll end up side by side in wide enough windows, or below each other in narrow windows (such as on a phone in portrait mode). But dedicated CSS media queries can only be used in the page's HEAD section, so more fancy things may not be possible (unless by using e.g. javascript or similar convoluted things).

QUOTE
I've tried using style but when I look at it in Safari - they end up underneath each other.

Could you post a link to the page, or at least some sample code?

pandy
Floating won't center them though. Yeah, show us what you've got.
Christian J
QUOTE(pandy @ Nov 28 2018, 06:25 PM) *

Floating won't center them though. Yeah, show us what you've got.

Now that you mentioned it blush.gif why not just center a couple of inline images?

CODE
<div style="text-align: center;">
<a href="join-us.html" style="margin-right: 100px; border: 0;"><img src="join-us.gif" alt="Join Us"></a>
<a href="join-us.html" style="border: 0;"><img src="book-us.gif" alt="Book Us" style="margin-right: 100px;"></a>
</div>

PamAtNZ
Thanks for your help.
- I tried using the code you suggested - If ended up left aligned though.

Here's the code..
___________________________________

<style type="text/css">IMG.displayed { display: block; margin-left: auto; margin-right: auto }
</style>
<h1 class="rtecenter"><img alt="" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/2018%20Sliders.jpg" style="width: 100%;" /></h1>

<p>&nbsp;</p>

<p><span style="font-size:18px;">WOSOSI...&nbsp;a dynamic, a cappella choir who bring the world’s rich singing traditions to you. Singing&nbsp;songs and chants from around the world, they convey&nbsp;each song’s intention and wairua - whether a quiet longing for your homeland, celebrating the joy of independence won, the despair of loved ones lost or the delicate beauty of a song of peace.</span></p>

<!-- these are the stacked ones I added because I couldn't put on same line -->
<p><a href="bookusform"><img alt="" class="displayed"
src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/Book%20Us%20Button.png" style="max-width: 250px; min-width: 160px; width: 100%; border: 0;" /></a></p>

<p><a href="joinus"><img alt="" class="displayed" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/Join%20Us%20Button.png" style="max-width: 250px; min-width: 160px; width: 100%; border: 0" /></a></p>

<!-- This is the code I put based on your suggestion -->
<div style="text-align: center;"><a href="join-us.html" style="margin-right: 100px; border: 0;"><img alt="Join Us" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/buttonjoinus.png" /></a> <a href="join-us.html" style="border: 0;"> <img alt="Book Us" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/buttonbookus.png" style="margin-right: 100px;" /> </a></div>

<p>&nbsp;</p>
pandy
Remove the single line of CSS that you have.

QUOTE
CODE

IMG.displayed { display: block; margin-left: auto; margin-right: auto }


That line makes images with the class 'displayed' block level (i.e. make them break the line) and the auto margins center them (but only as long as they are block).
Christian J
QUOTE(PamAtNZ @ Nov 30 2018, 11:53 AM) *

Thanks for your help.
- I tried using the code you suggested - If ended up left aligned though.

Oops, I made two three mistakes. The second image shouldn't have any right margin, the URL of the first link is wrong, and you probably want different file names for the button images. Try this instead:

CODE
<div style="text-align: center;">
<a href="join-us.html" style="margin-right: 100px; border: 0;"><img src="join-us.gif" alt="Join Us"></a>
<a href="book-us.html" style="border: 0;"><img src="book-us.gif" alt="Book Us"></a>
</div>
Christian J
QUOTE(pandy @ Nov 30 2018, 04:37 PM) *

Remove the single line of CSS that you have.

That doesn't affect my IMG elements though (since they don't have that CLASS value).
pandy
I commented the markup and CSS the OP posted, not what you suggested. The images are classed. No use to keep a CSS rule that isn't needed. The classes can of course be removed too if they aren't going to be used for something else.
PamAtNZ
I removed all code other than the two buttons.

The page is here
https://wososi.org.nz/test

As you can see - it's still left aligning on the page. Do you think there may some backend css styling that the div code you have suggested won't override?

This is what I added....links work, just the buttons position is wrong

[code]
<p>&nbsp;</p>

<div style="text-align: center;"><a href="joinus" style="margin-right: 100px; border: 0;"><img alt="Join Us" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/buttonjoinus.png" /> </a> <a href="bookusform" style="border: 0;"> <img alt="Book Us" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/buttonbookus.png" /> </a></div>
Christian J
QUOTE(PamAtNZ @ Dec 1 2018, 09:28 AM) *

Do you think there may some backend css styling that the div code you have suggested won't override?

Yes it seems one of the stylesheets makes all IMG elements "display: block". See if this helps:

CODE
<div style="text-align: center;">
<a href="joinus" style="margin-right: 100px; border: 0;"><img alt="Join Us" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/buttonjoinus.png" style="display: inline;" /></a>
<a href="bookusform" style="border: 0;"><img alt="Book Us" src="https://wososi.org.nz/sites/wososi.org.nz/files/banner/buttonbookus.png" style="display: inline;" /></a>
</div>

pandy
Or maybe edit the style sheet or this problem will occur throughout the site. It's backwards to make all images block and have to style images that shouldn't be block differently. The other way around is better, to have a special rule for images that should be block.

CODE
img, object, video {
    height: auto;
    display: block;
}
aresourcepool
This can be solved using the following CSS:
#container { text-align: center;}
button {display: inline-block;}
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.