Aligning text inside a div

Question

In the below code

 var panel=<div name="panel" id="panel" style="display:inline;position: absolute; margin-left: auto;margin-right:auto;left: 0;right: 0;width:350px;height: 100px;filter:alpha(opacity=50);">testfield1</div>' ;
  panel = panel + '&nbsp&nbsp<div id ="name" style="display:inline;position: absolute; margin-left: auto;margin-right:auto;left: 350px;right: 0;width:750px;height: 100%;border-color:black;">
        panel = panel + 'This is a test</div>

The text "This is a test" appears at the bottom of the div, whereas "testfield1" appears at the center. How to make both pieces of text inline with each other?

Thanks.

Answer 1

This is WAY too un-readable.

A few pointers though from what I CAN see

Use the StringBuilder class instead of concatenating all of those strings

System.Text.StringBuilder sb = new System.Text.StringBuilder()

sb.Append(@"<div id=""panel"">");

...

string panel = sb.ToString();

I don't think you need to add the name attribute to your divs, id normally suffices

Seperate out the styles into a seperate style sheet (css) and get rid of all the un-necessary non breaking spaces

In your css you want something like

div#panel
{
    display: inline;
    position: absolute;
    ...
}

    div#panel #name
    {
        display: inline;
        position: absolute;
    }

Also combine styles where you can, for example the above could be re-written as

div#panel, div#panel #name
{
    display: inline;
    position: absolute;
    ...
}

Then poeple will able to help you debug your css