对齐 div 内的文本

【问题标题】：Aligning text inside a div对齐 div 内的文本
【发布时间】：2011-01-24 01:43:46
【问题描述】：

在下面的代码中

 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>

文本“这是一个测试”出现在 div 的底部，而“testfield1”出现在中心。如何让两段文字相互内联？

谢谢。

【问题讨论】：

请显示生成的 HTML 或提供实时链接。

标签： html css css-selectors

【解决方案1】：

这太不可读了。

虽然我能看到一些提示

使用 StringBuilder 类而不是连接所有这些字符串

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

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

...

string panel = sb.ToString();

我认为你不需要将 name 属性添加到你的 div 中，id 通常就足够了

将样式分离成一个单独的样式表 (css) 并去掉所有不必要的不间断空格

在你的 CSS 中你想要类似的东西

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

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

还可以结合样式，例如上面可以重写为

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

然后人们将能够帮助您调试您的 css

【讨论】：