Category: HTML

HTML to Place Button in Center of a Text Area

Hey everyone! Here is a quick and dirty HTML code snippet for those of you who are working on your HTML skills.  Earlier this week, I was building a template with a Text Area containing several buttons.  I wanted to center the buttons in the Text Area, which is really easy to do with HTML.  You can also do this with CSS and <style>, but I’m just going to show you the two HTML versions that I worked with.

HTML Snippet No. 1

In this case, I have wrapped the buttons with <p> and </p> and simply added the align attribute with the “center” value.  Here’s what it looks like. Note, the buttons sit on their own line because they are individually wrapped with <p> and </p>.  <p> is a block level element that always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can in the Text Area).  Compare this to the second code snippet below.

 

HTML to center buttons 1

 

 

HTML Snippet No. 2

In this case, I have placed all buttons inside a <div> container and added the align attribute with the “center” value.  Now, <div> is also a block level element, but in this case, the buttons are not on their own line because they are inside of one container.  They would be on their own lines if I had placed them in individual <div> containers, but I was just seeing what I could do with less code.  Personally, I prefer the first look.

HTML to center buttons 2

 

I highly suggest reading up on the different block and inline elements.  Understanding what space will be taken up with a given element will help you better design Text Areas.  Please feel free to comment and provide suggestions for better code.  I am still very much working on HTML and CSS.  Thank you!