在asp.net中将页脚中心对齐并放在页面底部 [英] make footer center align and bottom of page in asp.net

查看:70
本文介绍了在asp.net中将页脚中心对齐并放在页面底部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正面临一个问题



页面中的页脚停留但不在中心位置。它现在正确对齐



我想让它居中对齐。





之前它甚至没有停留,但后来应用了.footerContent css,如下所述。



申请.footerContent。它解决了我的页脚不在页面底部的问题。现在它在底部,但显示广泛的权利。一半的页脚被削减。



你们可以纠正n告诉我什么是错的。



继承人错误屏幕



请参阅此处 [ ]





heres markup



I am facing one problem

my footer in page stays down but it not at center. its right aligned now

I want make it to center aligned.


earlier it was not even staying down but then applied .footerContent css which is mentioned below.

after applying .footerContent. it solved my problem of footer not being bottom of page. now its at bottom but shows extensively right . half of footer gets cut.

can u guys correct n show me whats wrong.

heres error screen

see here[]


heres markup

<body>
    <form id="form1" runat="server">
    <div id="wrapper">
        <div id="header" runat="server">
        <%-- Menu goes here --%>
      </div>
      <div id="masterpageContent" class="footer">
        <asp:ContentPlaceHolder ID="MainContent" runat="server" />
      </div>
    </div>
    <div class="footerContent">
        <div class="footerbrd">
        </div>
        <p class="clear">
        </p>
        <div class="footer">
            <div class="c1 fleft">
                Best viewed in IE8 and above with Resolution 1024x768
            </div>
            <div class="c2 fleft">
                (c) Copyright 2013
                <br />
                All Rights Reserved.
            </div>
            <div class="c3 fright">
                Site by abc Team
            </div>
            <p class="clear">
            </p>
        </div>
    </div>
    </form>
</body>









heres css









heres css


.footerbrd {width:929px; height:1px; background:#ef0b14; margin:0px auto;}
.footer {width:929px; margin:0px auto; padding:5px 0px; color:#666666;}
.footer .c1 {width:300px; margin:0px; padding:0px;}
.footer .c2 {width:375px; margin:0px; padding:0px; text-align:center;}
.footer .c3 {width:254px; margin:0px; padding:0px 0px 0px 0px; text-align:right;}
ul.foot {list-style:none; padding: 0px 0px; margin: 0px;}
ul.foot li {list-style:none; float:left; line-height:12px;}
ul.foot li a {color:#666666; padding: 2px 10px; font-size:11px; text-decoration:none; display:block; float:left;}

.footerContent { 
	position: absolute;
    height: 50px;
    width: 929px;
    margin: auto;
    bottom: 0px;
}

推荐答案

使用如下的中心标签:



Use center tag like below :

<div class="footerContent">
<center>
        <div class="footerbrd">
        </div>
        <p class="clear">
        </p>
        <div class="footer">
            <div class="c1 fleft">
                Best viewed in IE8 and above with Resolution 1024x768
            </div>
            <div class="c2 fleft">
                (c) Copyright 2013
                <br />
                All Rights Reserved.
            </div>
            <div class="c3 fright">
                Site by abc Team
            </div>
            <p class="clear">
            </p>
        </div>
</center>
    </div>







接受答案并投票如果有帮助。




Accept as answer and vote if help.


我在google上找到了这个问题并找到了问题的解决方案(现在有点晚了,但对于每个正在寻找的人)



页面应如下所示:



I found this question on google and found the solution to your problem (it is a bit late, but for everyone who is looking)

The page should look like this:

<html>
    <head runat="server">
        <title></title>

        <link rel="Stylesheet" href="../Scripts/layout.css" />

    </head>
    <body>
        <form id="form1" runat="server">
        <div id="wrapper">
            YOUR PAGE HERE      

          <div id="push">
          </div>
        </div>
    
        <div class="footer">
        YOUR FOOTER HERE    
        </div>
        </form>
    </body>
</html>



并在'layout.css'文件中(将其保存在您网站的'Scripts'文件夹中),添加:


And in the 'layout.css' file (save it in the 'Scripts' folder in your website), add this:

.wrapper 
{
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -20px;  /*the bottom margin is the negative value of the footer's height*/
}
.push
{
    height: 20px;  /*'.push' must be the same height as 'footer'*/
}
.footer
{ 
    position: absolute;
    height: 20px;
    width: 99%;
    margin: auto;
    bottom: 0px;
    text-align: center;
}


嗨..

你能看到这个吗!

如何仅为所有页面设置页脚底部 [ ^ ]


这篇关于在asp.net中将页脚中心对齐并放在页面底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆