Как центрировать div, обернутый панелью в asp.net?

Я создал div (панель результатов поиска), которая должна отображаться только тогда, когда пользователь вводит поисковый запрос, и она должна отображаться в центре макета.

Я использовал стиль css, как показано ниже.

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

Так что я появляюсь в центре во всех разрешениях.

Теперь я реализовал элемент управления ajax панели asp.net, чтобы отображать 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 css asp.net firefox
person Logesh Paul    schedule 14.08.2009    source источник

Ответы (5)


arrow_upward
1
arrow_downward

Я предполагаю, что в Firefox HTML-код, созданный ‹asp:Panel›, не имеет ширины 100%. Попробуйте проверить его с помощью FireBug и посмотрите.

Если это так, есть два решения:

  • Используйте CSS, чтобы установить ширину панели на 100%. Вместе с CSS, который у вас уже есть, это позволит ‹div› центрироваться внутри него.
  • Переместите CSS, который у вас есть сейчас (margin: 0 auto; width: 1000px;), чтобы управлять самой панелью. Поскольку панель выглядит вне потока страницы, она будет центрироваться в окне просмотра по горизонтали.
person Raleigh Buckner    schedule 14.08.2009

arrow_upward
0
arrow_downward

Вы пробовали использовать <div align="center">? Да, я знаю, что этот тег устарел, но он по-прежнему широко поддерживается браузерами, может быть, даже больше, чем эквивалент CSS, кто знает?

person Mr. Smith    schedule 14.08.2009

arrow_upward
0
arrow_downward

Пытаться

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

arrow_upward
0
arrow_downward

Поместите класс css на свою панель (по свойству панели CssClsss).

Этот класс css должен указывать ширину;

затем поместите свой div с полем: 0 auto, и этот div будет центрирован на панели

person Gregoire    schedule 14.08.2009
comment
я уже использовал свойство CssClass, и я установил маржу: 0 auto в своем коде css. Тем не менее, он деактивируется, когда я запускаю приложение. Я думаю, что проблема заключается в моем элементе управления ajax AlwaysVisibleControlExtende... любые идеи - person Logesh Paul; 15.08.2009

arrow_upward
0
arrow_downward

Спасибо всем

Я использовал фиксированную панель поиска с CSS, используя приведенный ниже источник.

Нажмите здесь

person Logesh Paul    schedule 02.09.2009