ASP.Net Adapting layout, Adapt Image and button to resolution ( Responsive layout )

Question

我对 HTML 和 CSS 有点陌生，我知道，但我根本不擅长设计，我确信我想要的东西是可能的，但我没有得到好的结果/搜索当我在寻找我想要的东西时，我很坚强，你们可以帮助我。 （我认为它称为响应式布局？如果我错了，请纠正我）

我现在得到了这个页面：

我认为这看起来不错，但我想知道如何让它保持这样，无论分辨率如何，所以如果我裁剪浏览器窗口，我希望徽标位于两者之上按钮有点居中。

我的代码只是：

<img src='../../iScrape.png' style="margin-top:25%;margin-left:35%;" />
            <br />
            <input id="Button1" type="button" value="LEARN MORE"style="
        margin-top:2%;
        margin-left:34%;
        padding-left:2%;
        padding-right:2%;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color:transparent;
        border-color:white;
        font-family:Verdana;
        color:white;
        " onclick="location.href='@Url.Action("About", "Home")'" />
            <input id="Button2" type="button" value="TESTING1 TWO" style="
        margin-left:2%;
        padding-left:2%;
        padding-right:2%;
        border-top-left-radius: 10px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        background-color:#ED5B53;
        border-color:transparent;
        font-family:Verdana;
        color:white;
        " onclick="location.href='@Url.Action("Testing1two", "Home")'" />

( 全部在 ASP.Net 项目的基本模板的正文中。

我想知道是否有一种简单的方法可以做我想做的事，我敢肯定是因为裁剪和获取：

不是很好

Answer 1

使用包管理器将 Bootstrap 安装到 VS 中。然后只需添加一个自定义 CSS 类。

然后您可以这样添加按钮：

<div class="container">
    <div class="row">
        <div class="center-block">
            <!-- add buttons here -->
        </div>
    </div>
</div>

您可以将背景图片添加到自定义 CSS 中的 body 类中。

文档：http://getbootstrap.com/css/#helper-classes-center