DIV-ben lévő tartalom középre igazítása

DIV-ben lévő tartalom középre igazítása
2012-02-22T18:44:46+01:00
2012-02-22T23:45:20+01:00
2022-11-24T19:30:39+01:00
mobilport
Sziasztok!
Egy idegesítő problémába ütköztem, ami első látásra egyszerűnek tűnt, de hosszas kínlódás után sem sikerült megoldanom. Az oldal(ak) tetején egy csík van, abban van benne a bejelentkezés, illetve a statisztika, attól függően, hogy valaki be van-e jelentkezve. Van egy DIV, abban van 2 asp:panel, az egyik a bejelentkezésnek, a másik a statisztikának. A problémám az lenne, hogy nem tudom sehogy sem megoldani, hogy a panelek és a tartalmaik vertikálisan középre legyenek igazítva.

A CSS kód:
#site-bottom-bar { background-color: #505050; border-top: 1px solid #CCCCCC; top: 0px; font-family: verdana, arial; font-size: 11px; height: 29px; text-align:center; margin: 0px 0px 0px 0px; position: fixed; width: 100%; z-index: 1000; background-image: url('Styles/images/lab_bg.png'); color: #CCCCCC; padding: 1px 0px 0px 0px; }

És a HTML, egyben ASP kód:
<div id="site-bottom-bar"> <asp:Panel ID="Panel1" runat="server" Height="27px"> <span class="vilagos-szoveg"> Felhasználónév: </span> <asp:TextBox ID="txtNev" runat="server" CssClass="style3" Width="109px" BackColor="Silver" BorderColor="Gray" ForeColor="Black"></asp:TextBox> <span class="vilagos-szoveg">&nbsp;Jelszó: </span> <asp:TextBox ID="txtJelszo" runat="server" CssClass="style3" Width="117px" BackColor="Silver" BorderColor="Gray" ForeColor="Black" TextMode="Password"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Bejelentkezés" BackColor="#666666" BorderColor="#999999" ForeColor="White" onclick="Button1_Click" CssClass="vilagos-szoveg" /> <span class="vilagos-szoveg">Még nem vagy tag? </span> <asp:LinkButton ID="LinkButton1" runat="server" ForeColor="#CCCCCC" CssClass="style3" onclick="LinkButton1_Click">Regisztrálj most!</asp:LinkButton> </asp:Panel> <asp:Panel ID="Panel2" runat="server" Height="27px"> <table width="100%"> <tr> <td align="left"> &nbsp;&nbsp;&nbsp; Üdvözöllek <asp:Label ID="lblNev" runat="server" Font-Bold="True"></asp:Label>! <asp:LinkButton ID="LinkButton4" runat="server" ForeColor="#CCCCCC" Font-Underline="False" onclick="LinkButton4_Click" Visible="False">[Admin]</asp:LinkButton> <asp:LinkButton ID="LinkButton2" runat="server" ForeColor="#CCCCCC" Font-Underline="False" onclick="LinkButton2_Click">[Profil]</asp:LinkButton> <asp:LinkButton ID="LinkButton3" runat="server" ForeColor="#CCCCCC" Font-Underline="False" onclick="LinkButton3_Click" Font-Bold="True">Kijelentkezés</asp:LinkButton> </td> <td align="right"> Feltöltött dalszövegeid száma: <asp:Label ID="lblFeltoltotted" runat="server" Text="0"></asp:Label> Kedvelt dalszövegeid száma: <asp:Label ID="lblKedvelted" runat="server" Text="0"></asp:Label> &nbsp;&nbsp;&nbsp;</td> </tr> </table> </asp:Panel> </div>

Próbálkoztam a CSSben vertical-align:middle kóddal, és a DIVben style használatával is, de sehogy nem sikerült.

Előre is köszönöm a segítséget!
Mutasd a teljes hozzászólást!
No és így?
<div id="site-bottom-bar">
<table align="center">
<tr><td valign="middle" style="height:100%">
<asp:Panel ID="Panel1" runat="server" Height="27px">
<span class="vilagos-szoveg">
Felhasználónév: </span>
<asp:TextBox ID="txtNev" runat="server" CssClass="style3" Width="109px"
BackColor="Silver" BorderColor="Gray" ForeColor="Black"></asp:TextBox>
<span class="vilagos-szoveg">&nbsp;Jelszó: </span>
<asp:TextBox ID="txtJelszo" runat="server" CssClass="style3" Width="117px"
BackColor="Silver" BorderColor="Gray" ForeColor="Black"
TextMode="Password"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Bejelentkezés"
BackColor="#666666" BorderColor="#999999" ForeColor="White"
onclick="Button1_Click" CssClass="vilagos-szoveg" /> <span class="vilagos-szoveg">Még nem
vagy tag? </span>
<asp:LinkButton ID="LinkButton1" runat="server" ForeColor="#CCCCCC"
CssClass="style3" onclick="LinkButton1_Click">Regisztrálj most!</asp:LinkButton>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" Height="27px">
<table width="100%">
<tr>
<td align="left">
&nbsp;&nbsp;&nbsp; Üdvözöllek <asp:Label ID="lblNev" runat="server"
Font-Bold="True"></asp:Label>!
<asp:LinkButton ID="LinkButton4" runat="server" ForeColor="#CCCCCC"
Font-Underline="False" onclick="LinkButton4_Click" Visible="False">[Admin]</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" ForeColor="#CCCCCC"
Font-Underline="False" onclick="LinkButton2_Click">[Profil]</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" ForeColor="#CCCCCC"
Font-Underline="False" onclick="LinkButton3_Click" Font-Bold="True">Kijelentkezés</asp:LinkButton>
</td>
<td align="right"> Feltöltött dalszövegeid száma:
<asp:Label ID="lblFeltoltotted" runat="server" Text="0"></asp:Label> Kedvelt dalszövegeid száma:
<asp:Label ID="lblKedvelted" runat="server" Text="0"></asp:Label> &nbsp;&nbsp;&nbsp;</td>
</tr>
</table>
</asp:Panel>
</td></tr>
</table>
</div>
persze a #site-bottom-bar {height:29px}-et nagyobbra kell állítani, hogy érezhető legyen.
Mutasd a teljes hozzászólást!

  • Esetleg margin: 0 auto;?
    Amúgy tudnál adni egy linket vagy feltöltenél képet a probléma megjelenéséről?
    Mutasd a teljes hozzászólást!
  • Kép: http://kepfeltoltes.hu/120222/692212796N_vtelen_www.kepfeltoltes.hu_..

    Sajnos nem jó ha autora veszem a margint sem:S
    Mutasd a teljes hozzászólást!
  • Akkor próbáld meg úgy, hogy a bal margótól számítva valahány pixellel arrébb tolod.
    Mutasd a teljes hozzászólást!
  • Helló.
    Ha jól értettem a kérdést akkor mindenki más félre értette.
    A kérdés nem a div(blokk szintű elem) középre igazítása , hanem a benne levő szövegé.
    Ezt legegyszerűbben:
    text-align: center
    Ha nem így van , vagy nem működik stb. kérlek rakd ki a HTML (kimeneti forráskódot , Ctrl + U). Így könnyebb , mert PHP-s vagyok az ASP-hez csak alapszinten konyítok...
    Cusy27
    Mutasd a teljes hozzászólást!
  • A DIVben lévő szöveget szeretném középre igazítani függőlegesen. A probléma az, hogy a DIVben van panel, és azon belül még egy táblázat is.


    <div id="site-bottom-bar"> <div id="Panel2" style="height:27px;"> <table width="100%"> <tr> <td align="left"> &nbsp;&nbsp;&nbsp; Üdvözöllek <span id="lblNev" style="font-weight:bold;">mobilport</span>! <a id="LinkButton4" href="javascript:__doPostBack(&#39;ctl00$LinkButton4&#39;,&#39;&#39;)" style="color:#CCCCCC;text-decoration:none;">[Admin]</a> <a id="LinkButton2" href="javascript:__doPostBack(&#39;ctl00$LinkButton2&#39;,&#39;&#39;)" style="color:#CCCCCC;text-decoration:none;">[Profil]</a> <a id="LinkButton3" href="javascript:__doPostBack(&#39;ctl00$LinkButton3&#39;,&#39;&#39;)" style="color:#CCCCCC;font-weight:bold;text-decoration:none;">Kijelentkezés</a> </td> <td align="right"> Feltöltött dalszövegeid száma: <span id="lblFeltoltotted">8</span> Kedvelt dalszövegeid száma: <span id="lblKedvelted">5</span> &nbsp;&nbsp;&nbsp;</td> </tr> </table> </div> </div>

    Még annyit, hogy amit DIVET létrehoz magától Panel2-es IDval az eredetileg nem DIV hanem a panel maga, csak fordításnál alakul át.
    Mutasd a teljes hozzászólást!
  • Szia!
    Próbáld ki:
    <div style="display:table-cell;vertical-align:middle;">
    Mutasd a teljes hozzászólást!
  • Hiába teszem rá a DIV-re akkor sem jó
    Mutasd a teljes hozzászólást!
  • No és így?
    <div id="site-bottom-bar">
    <table align="center">
    <tr><td valign="middle" style="height:100%">
    <asp:Panel ID="Panel1" runat="server" Height="27px">
    <span class="vilagos-szoveg">
    Felhasználónév: </span>
    <asp:TextBox ID="txtNev" runat="server" CssClass="style3" Width="109px"
    BackColor="Silver" BorderColor="Gray" ForeColor="Black"></asp:TextBox>
    <span class="vilagos-szoveg">&nbsp;Jelszó: </span>
    <asp:TextBox ID="txtJelszo" runat="server" CssClass="style3" Width="117px"
    BackColor="Silver" BorderColor="Gray" ForeColor="Black"
    TextMode="Password"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Bejelentkezés"
    BackColor="#666666" BorderColor="#999999" ForeColor="White"
    onclick="Button1_Click" CssClass="vilagos-szoveg" /> <span class="vilagos-szoveg">Még nem
    vagy tag? </span>
    <asp:LinkButton ID="LinkButton1" runat="server" ForeColor="#CCCCCC"
    CssClass="style3" onclick="LinkButton1_Click">Regisztrálj most!</asp:LinkButton>
    </asp:Panel>
    <asp:Panel ID="Panel2" runat="server" Height="27px">
    <table width="100%">
    <tr>
    <td align="left">
    &nbsp;&nbsp;&nbsp; Üdvözöllek <asp:Label ID="lblNev" runat="server"
    Font-Bold="True"></asp:Label>!
    <asp:LinkButton ID="LinkButton4" runat="server" ForeColor="#CCCCCC"
    Font-Underline="False" onclick="LinkButton4_Click" Visible="False">[Admin]</asp:LinkButton>
    <asp:LinkButton ID="LinkButton2" runat="server" ForeColor="#CCCCCC"
    Font-Underline="False" onclick="LinkButton2_Click">[Profil]</asp:LinkButton>
    <asp:LinkButton ID="LinkButton3" runat="server" ForeColor="#CCCCCC"
    Font-Underline="False" onclick="LinkButton3_Click" Font-Bold="True">Kijelentkezés</asp:LinkButton>
    </td>
    <td align="right"> Feltöltött dalszövegeid száma:
    <asp:Label ID="lblFeltoltotted" runat="server" Text="0"></asp:Label> Kedvelt dalszövegeid száma:
    <asp:Label ID="lblKedvelted" runat="server" Text="0"></asp:Label> &nbsp;&nbsp;&nbsp;</td>
    </tr>
    </table>
    </asp:Panel>
    </td></tr>
    </table>
    </div>
    persze a #site-bottom-bar {height:29px}-et nagyobbra kell állítani, hogy érezhető legyen.
    Mutasd a teljes hozzászólást!
  • Köszönöm a segítséged, tökéletesen működik!
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd