如何在asp.net中将用面板包裹的div居中？答案

【问题标题】：How to center a div wrapped with panel in asp.net?如何在asp.net中将用面板包裹的div居中？
【发布时间】：2019-05-25 03:55:06
【问题描述】：

我创建了一个 div（搜索结果词条），它应该只在用户输入搜索词时显示，并且应该出现在布局的中心。

我使用了如下的css样式

search_list{ margin:0 auto; width:1000px; }

这样 i 在所有分辨率中都处于中心位置。

现在我实现了一个 asp.net 面板 ajax 控件，仅当用户输入搜索词时才显示 div。

下面是我的代码：

<asp:Panel runat="server" ID="pnlsearchinfo">
                            <div class="search_list" id="SearchText" visible="false" runat="server">
    <%--<div class="search_text">Search Result for </div>--%>

    <div class="search_term">
        <asp:Label ID="lblsearchtxt" runat="server" Text=""></asp:Label></div>
    <div class="search_return">
        <asp:ImageButton ID="IbtnSearchClose" ImageUrl="images/blu-close.jpg" runat="server"  align="absmiddle" OnClick="IbtnSearchClose_Click"  /><asp:LinkButton
            ID="lnkSearchClose" runat="server" OnClick="lnkSearchClose_Click" >Return to Full List</asp:LinkButton></div>                
    <br class="clr_flt" />
   </div><!-- end search_list --></asp:Panel>
   <cc1:AlwaysVisibleControlExtender TargetControlID="pnlsearchinfo" ScrollEffectDuration="1"
                    ID="AlwaysVisibleControlExtender1" VerticalOffset="225"  runat="server" Enabled="true">
                </cc1:AlwaysVisibleControlExtender>

但问题是 margin:0 auto;在 IE 中运行良好（搜索结果术语栏居中）。但是在Firefox中它的抛出问题（左对齐）

当我使用 Horizonaloffset 时，它在 firefox 中工作。但这对分辨率不友好。我可以使用其他一些控件将搜索结果术语栏居中吗？

【问题讨论】：

标签： .net asp.net css firefox

【解决方案1】：

我猜在 Firefox 中，由创建的 HTML 未设置为 100% 宽度。尝试使用FireBug 检查它并查看。

如果是这种情况，有两种解决方案：

使用 CSS 将面板的宽度设置为 100%。除了您已经拥有的 CSS，这将允许
在其中居中。
移动您现在拥有的 CSS (margin:0 auto; width:1000px;) 来控制面板本身。由于面板看起来在页面流之外，它会在视口内水平居中。

【讨论】：

【解决方案2】：

您是否尝试过使用<div align="center">？是的，我知道该标签已被弃用，但它仍然受到浏览器的广泛支持，甚至可能超过 CSS 等价物，谁知道呢？

【讨论】：

【解决方案3】：

试试

<div id="SearchText" style="text-align:center;"><div style="width:1000px;">SEARCH RESULT FOR x</div></div>

【讨论】：

【解决方案4】：

在面板上放置一个 css 类（通过面板 CssClsss 属性）。

这个css类必须指定一个宽度；

然后将您的 div 设置为 margin:0 auto，这个 div 将在面板中居中

【讨论】：

我已经使用了 CssClass 属性并且我已经在我的 css 代码中定义了 margin:0 auto 。当我运行应用程序时，它仍然被停用。我认为问题在于我的 ajax 控件“AlwaysVisibleControlExtende”......任何想法

【解决方案5】：

谢谢大家

我使用下面的源代码使用了带有 css 的固定搜索栏。

Click here

【讨论】：