Comment centrer un div enveloppé avec un panneau dans asp.net?

Question

J'ai créé un div (barre de termes de résultats de recherche) qui devrait s'afficher uniquement lorsque l'utilisateur entre un terme de recherche et qu'il devrait apparaître au centre de la mise en page. Voir la capture d'écran 1) before et 2) after pour avoir une idée claire.

J'ai utilisé le style css comme ci-dessous

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

Alors que j'apparaît centre dans toutes les résolutions.

Maintenant, j'ai mis en place un contrôle ajax panneau asp.net pour montrer le div seulement lorsque l'utilisateur entre le terme de recherche.

Voici ci-dessous est mon code:

<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> 

Mais le problème est la marge: 0 auto; fonctionne bien dans IE (la barre des termes de recherche est centrée). Mais dans Firefox son problème de lancement (aligné à gauche) screenshot.

Quand j'utilise Horizonaloffset son travail dans firefox. Mais ce n'est pas une solution amicale. Puis-je centrer la barre de termes des résultats de recherche avec d'autres commandes?

Merci à l'avance

Answer 1

Merci à tous

je la barre de recherche fixe avec l'aide de la source css ci-dessous.

Click here

Answer 2

Avez-vous essayé d'utiliser <div align="center">? Oui, je sais que le tag est déconseillé, mais il est encore largement supporté par les navigateurs, peut-être même plus que l'équivalent CSS, qui sait?

Answer 3

Je suppose que dans Firefox, le code HTML créé par le < asp: Panel > n'est pas défini sur 100% de largeur. Essayez d'inspecter avec FireBug et voir.

Si tel est le cas, il y a deux solutions:

• Utilisez CSS pour définir la largeur du Groupe à 100%. Avec le CSS que vous avez déjà, cela permettra au <div> de se centrer en son sein.
• Déplacez le CSS que vous avez maintenant (marge: 0 auto; largeur: 1000px;) pour contrôler le panneau lui-même. Comme le panneau semble être en dehors du flux de la page, il se centrera dans la fenêtre horizontalement.

Answer 4

Essayez

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

Answer 5

Mettez une classe css sur votre panneau (par le panneau propriété CssClsss).

Cette classe css doit spécifier une largeur;

puis mettez votre div avec margin: 0 auto et ce div sera centré dans le panneau