-2

好的，请耐心等待，因为我是 WEB 开发的新手。

我有一个使用 Razor 和 Entity Framework 5 (C#) 的 MVC 4.0 Web API 应用程序。

我的一个链接将我带到显示来自 EF 的数据的页面。

我在这个页面上添加了一个名为“导出到 Excel”的 HTML 按钮。

我想将此按钮置于屏幕中央，报告结果上方。

什么是正确的方法，我该怎么做？我需要了解文件和代码的正确架构。

  1. 我使用 CSS 吗？如果是这样，我应该将文件存储在解决方案中的什么位置？如何在我的页面上使用它？

  2. 我是否对 Razor 做一些特定的事情？

我是否应该简单地使用 HTML 标签

同样，我要做的就是在网页上居中放置一个按钮。

有人可以帮助我一步一步正确地做到这一点吗？

我只是很难弄清楚将代码和文件放在哪里（基本上是如何正确构建应用程序）。

4

4 回答 4

1

我知道有一个答案，但这是使对象居中的一种非常常见的方法margin: 0 auto。由于答案本身并没有真正解释，我将提供一些细节。

当您构建视图时，它被标记为.cshtml文件。您的视图将包含一系列HTML或超文本标记语言。您正在做的是利用一个名为 a的特定元素div。这些用于帮助为您的站点构建结构或布局。

<div id="Origin">
     <div class="origin-container">
           <div class="header-style">
                <div id="Origin-Header">
                    <div class="header-container">

                        // Inside Header Elements
                    </div>
                </div>
            </div>
     </div>
</div>

所以本质上这是一个站点结构。你会注意到我倾向于对我的很多Elements进行内部包装。那是因为它使自定义和样式化我的布局变得更加容易，使其更具可定制性。

如果您的想法是“如何更可定制？” 您部分正确，此HTML只是一个结构 - 自定义将来自您的样式表，确切地说是级联样式表。

您的HTML将调用此样式表以帮助调整布局以提供一致的外观。因此，如果您想将标题居中放置在样式表中：

#Origin-Header {
    margin: 0 auto;
}

该命令说明的是三件事：

  • 边距：这些是页边距。
  • 0：是Top 和 Bottom的像素差。
  • 自动：左右像素。

因此，而不是顶部、底部、左侧和右侧，它们都以简写形式合并在一起。您还可以通过样式表对布局进行大量额外控制。请记住，这是在操纵那些div tags. 如果您尝试对齐特定对象，它会以相同的方式工作，而是专注于元素 - 您将其指向您的html 对象。

但我希望这会有所帮助。

于 2013-06-06T21:29:47.497 回答
1

您可以使用CSS.

.centerAlign {
   text-align: center;
}

在您看来，您可以将centerAlign类应用于按钮：

<button class='centerAlign' />

您还可以进行自定义HTML Helper，自动为您应用课程。

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);
          }
     }
}

那么在您看来，您可以这样做：

@Html.ButtonCenter("Click me");
于 2013-06-06T20:58:01.543 回答
0

试试这个：[我猜这就是你要找的]检查jsfiddle上的 LIVE DEMO

HTML

<section class="iHaveBorder">
    <h3>Help me here!...Center stuff...</h3>
    <div class="myWorderfullDiv iAmRed">
        your report here...
    </div>
    <center>
        <button>DoIt</button>
    </center>
</section>
<h1>::::::OR:::::</h1>
<section class="iHaveBorder">
    <h3>Help me here!...Center stuff...</h3>
    <div class="myWorderfullDiv iAmBlue">your report here...</div>
    <div style="text-align: center;" >
        <button>DoIt</button>
    </div>
</section>
<h1>::::::OR relative:::::</h1>
<section class="iHaveBorder iFeetIn">
    <h3>Help me here!...Center stuff...</h3>
    <div class="myWorderfullDiv iAmGreen">your report here...</div>
    <div class="iWant2BeCenter">
        <button>DoIt</button>
    </div>
</section>

CSS：

.myWorderfullDiv{
height: 80px; width: 200px; 
}
.iAmBlue{background-color: blue}
.iAmRed{background-color: red}
.iAmGreen{background-color: green}

.iHaveBorder{border:2px black solid;}

.iFeetIn{display: inline-block;}
.iWant2BeCenter{text-align: center;}

在jsfiddle上查看 LIVE DEMO

于 2013-06-06T21:25:47.797 回答
0

我不知道这是否是一种好习惯，但我能够像 HTML 中的按钮一样将整个控件居中的唯一方法是执行类似的操作

.btn{
    margin-left:auto;
    margin-right:auto;
 }

通过将按钮的类设置为“btn”并使用上面的 css，我已经能够使控件居中。text-align 属性在 HTML 中从来没有真正为我工作过。

于 2013-06-06T21:06:11.040 回答