How do I center HTML objects on an MVC 4.0 Web API using Razor application?


Tags: html,css

Problem :

Okay, bear with me because I'm new to WEB development.

I have an MVC 4.0 Web API application using Razor and Entity Framework 5 (C#).

One of my links takes me to a page which displays data from the EF.

I added an HTML button to this page called "Export to Excel."

I want to center this button on the screen, above the report results.

What is the correct approach for this and how do I do it? I need to understand the PROPER architecture for files and code.

  1. Do I use CSS? If so, where do I store the file in the solution? How do I use it on my page?

  2. Do I do something specific to Razor?

Should I simply use HTML tags like

Again, all I want to do is center a button on the web page.

Can someone help me with a step by step process to do this correctly?

I'm just having a hard time figuring out where to put code and files (basically how to structure the application properly).



Solution :

You can use CSS.

.centerAlign {
   text-align: center;
}

In your view you can then apply the centerAlign class to the button:

<button class='centerAlign' />

You can also make a custom HTML Helper that will automatically apply the class for you.

namespace YourApplication.Helpers
{
     public static class ButtonExtensions
     {
          public static string ButtonCenter(this HtmlHelper helper, string value)
          {
               return String.Format("<button class='centerAlign'> {0} </button>", value);
          }
     }
}

Then in your view you could do:

@Html.ButtonCenter("Click me");

    CSS Howto..

    how to rotate text with css? transform is not supported by current schema?

    how do I properly position a button element with css?

    Ext JS 4.2 - How to create a header like the one at KitchenSink sample?

    Div is laying ontop of absolute-positioned element. How to put element above the div?

    How to change background-color of selected option in IE11?

    How to find the screen width and apply it to a particular css

    How to Remove - Modify btn-inverse Top Border

    CSS - How to add a second background image

    How to set overflow content to go underneath instead of fitting in one row

    How to snap divs together vertically in CSS like Pinterest have

    How do I fill up the remainder of a div with another div?

    How can I add a pulse animation to a div in an array of divs, in Javascript?

    PrimeFaces: how to override CSS class

    How to format currency as you type using jQuery

    How to make bootstrap css input add-on button and error span look good

    How to put all my elements in line horizontally and Should be Responsive using bootstrap?

    How would YOU do this: Tables or CSS? [closed]

    Rails - how to place text onto an image within a code loop

    How to fix float sidebar in Wordpress with Constructor theme?

    Beginner's stuff: How to stop CSS' Divs from overlapping?

    How can I place an element at the top of a page using CSS?

    How to create page breaks automatically in CSS?

    CSS: How do I assign one class to multiple elements?

    how to position a container in the middle of the screen? [duplicate]

    How to change default theme color teal to blue without using custom CSS in materilaize

    How do you hide an HTML element based on a series of parent elements

    How can I create a good-looking responsive image gallery WITHOUT perfectly sized images?

    How to Indent using HTML or CSS

    How do I get a CSS Selector to Skip Over?

    How to make changes in wordpress template. Css direct edit not working