选项卡面板中的标签使用C＃ [英] Label in Tab Panel Using C#

问题描述

大家好，



任何人都可以帮助我如何将C＃中生成的标签设置在整个标签面板的中央？ （请参阅以下链接）



这是我想要达到的输出：

http://i.stack.imgur.com/BE8WY.png [ ^ ]



这是我的代码：

Hi All,

Anyone help me how can I set label generated in C# to be positioned at the center of the whole tab panel? (Please see below link)

This is the output I want to achieve:
http://i.stack.imgur.com/BE8WY.png[^]

This is my code:

if(panel.Controls.Count<1)
                {
                    System.Web.UI.HtmlControls.HtmlGenericControl panelDIV = new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
                    panelDIV.ID = "panelDIV";
                    panelDIV.Style.Add(HtmlTextWriterStyle.TextAlign, "center");
                    panelDIV.Style.Add(HtmlTextWriterStyle.Width, "100%");
                    panelDIV.Style.Add(HtmlTextWriterStyle.Position, "center");
                    panelDIV.Style.Add(HtmlTextWriterStyle.FontStyle, "Arial");


                    System.Web.UI.WebControls.Label newTabel = new System.Web.UI.WebControls.Label();
                    newTabel.Text +=  "no chart to display";
                    newTabel.Font.Bold = true;
                    newTabel.Font.Size=16;
                    newTabel.Style.Add("text-align", "center");
                    panelDIV.Controls.Add(newTabel);
                    panel.Controls.Add(panelDIV);
                }

问题：如何将C＃中生成的标签设置为整个标签的中心位置小组？

谢谢。

Question: how to set label generated in C# to be positioned at the center of the whole tab panel?
Thanks.

推荐答案

你可以通过以下方式完成：



Option1 ：使用Style.Add（）

You can do it in following ways:

Option1: Using Style.Add()

newTabel.Style.Add("text-align", "center");

Option2 ：使用CSS类



在apsx文件中添加以下类

Option2: Using CSS class

Add following class in apsx file

.MyClass {
    text-align: center;
}

在代码隐藏文件中添加以下代码：

Add following code in code-behind file:

newTabel.CssClass = "MyClass";

垂直居中是CSS中最难做的事情之一。 :)



以CSS为中心：完整指南 [ ^ ]



如果你可以使用 Flexbox [ ^ ]，然后它相对简单：

Vertical centering is one of the hardest things to do in CSS. :)

Centering in CSS: A Complete Guide[^]

If you can use Flexbox[^], then it's relatively simple:

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

如果可以使用 2D变换 [ ^ ]，那么这应该work：

If you can use 2D transforms[^], then this should work:

.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

如果你坚持支持IE8或者更早，除非父元素和子元素都是固定的高度，否则没有真正的解决方案。

If you're stuck with supporting IE8 or earlier, then there's no real solution, unless both the parent and child elements are a fixed height.

这篇关于选项卡面板中的标签使用C＃的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！