Title: Aligning Navigational Footer Divs
Author: LeeDavis
Category: CODING
Published: 2017-02-26 13:43:29
Clicks: 53
The creation of navigational footers can be a trying job for many not well-versed in the vagaries of HTML coding. I don''t know how many times I've seen this question all over the Internet; "How do I get my site navigation to align itself in the dead center of the page?" It's actually so simple that it almost makes me cringe - especially as I was having a serious problem with this issue only months before. I love to embed navigation into HTML form buttons;

CODE:

< form action="YourPage.php" target="_self" >
< input form="" type="Submit" value="YourValue" / >

RESULT:


Works well (and, cross-browser from my testing and experience), but most times you'll want to have more than one button and aligned on the same level. It's really harder than it looks. I had a div that looked like;

CODE:

< form action="#" target="_self">< input type="Submit" value="myvalue" / >
< form action="#" target="_self">< input type="Submit" value="myvalue" / >
< form action="#" target="_self">< input type="Submit" value="myvalue" / >
< form action="#" target="_self">< input type="Submit" value="myvalue" / >

RESULT:


In fact, I had such a hard time with it that I thought it might require some insane, super-geek of a solution and was ready to hunker down for hours of searching and reading when I came across a nugget of simplicity on "HyperlinkCode";

CODE:

< input type="button" value="myvalue" / >

RESULT:


My result came from a leap of logic that saw me wrapping the button elements with two divs; the outer div with the text-align css property, and the inner div with the display css property. Forcing the input buttons to line up as if they were text objects between the single form element. Works a treat!