How to Align a Button With Text in Line HTML

Save

Using the "div" HTML tag, you can align any button or image with the text placed on your Web pages. This allows you to wrap the text around the button without forcing the text to display beneath the button. This type of HTML programming uses style sheets to place the text wrapper and insert the button in the div tag.

  • Right-click the HTML file you want to edit. Select "Open With" in the popup menu options. Double-click the HTML programming editor you use to create and edit your files. You can also edit HTML with Notepad if you don't have a third-party option.

  • Scroll down to the location of your button. Type the div tag code surrounding the button tag. For instance, the following div tag contains the button named "mybutton":

    <div><input type="button" id="mybutton"></div>

  • Use the "align" property to align the button's div with the text. For instance, if you want to align the button to the left of the text, use the following code:

    <div><input type="button" style="text-align: right" id="mybutton"></div>

  • Click the "File" menu item. Select "Save." The CSS code saves to the file. To test your changes, double-click the file on your hard drive. The file opens in the Web browser, so you can see the new text alignment.

References

Promoted By Zergnet

Comments

You May Also Like

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!