asp.net - 验证摘要垂直对齐

Question

我有一个两列布局页面，两列上方有一个验证摘要 (VS) 控件。VS 在列上方的容器中居中，这是我想要的，但如果可能的话，我也希望不同的项目符号点垂直对齐。我尝试了几件事，包括将 VS 放在 a div（在中心对齐的容器 div 内）与text-align:left;，但这会将整个移动div到容器的一侧。我也尝试过制作div text-align:center;和 VS text-align:left;，但这也会将整个块一直向左移动。我也用桌子尝试过同样的事情，但没有运气。
顺便说一下，这是在 Firefox 中。我没有在其他浏览器中测试过，但它需要在FF中工作。
这是显示混乱的垂直对齐的图片：

这是我的 VS 控件的代码，没有我的对齐尝试（如果需要更多代码，请告诉我）：

<div id="container">
  <asp:Label ID="lblStatus" runat="server" ForeColor="Red"></asp:Label>
  <asp:ValidationSummary ID="VS1" runat="server" CssClass="validator" ValidationGroup="theform" />
  <div id="leftCol">

有人可以帮我垂直对齐页面中心的那些要点吗？

Answer 1

由于项目符号点是列表项的一部分，我认为您无法对齐它们。为什么不尝试使用带有 3 个 div 的顶列并将您的验证摘要控件放在中间的列。试试这个

HTML 代码

<div id="container" class="container">
    <div id="top" class="top">
        <div id="topLeft" class="topLeft">
            &nbsp;
        </div>
        <div id="topMiddle" class="topMiddle">
            <asp:ValidationSummary ID="ValidationSummary1" runat="server" />
        </div>
        <div id="topRight" class="topRight">
            &nbsp;
        </div>
    </div>
    <div id="bottom" class="bottom">
        <div id="bottomLeft" class="bottomLeft">
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="input value" ControlToValidate="TextBox1" Text="*"></asp:RequiredFieldValidator><br />
            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ErrorMessage="Need come input for this" ControlToValidate="TextBox2" Text="*"></asp:RequiredFieldValidator><br />
            <asp:Button ID="Button1" runat="server" Text="Button" />
        </div>
        <div id="bottomRight" class="bottomRight">
            <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="please input text" ControlToValidate="TextBox3" Text="*"></asp:RequiredFieldValidator><br />
            <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
            <asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ErrorMessage="Where is the text?" ControlToValidate="TextBox4" Text="*"></asp:RequiredFieldValidator><br />
            <asp:Button ID="Button2" runat="server" Text="Button" />
        </div>
    </div>
</div>

CSS

.container
{
    display: block;
    width:800px;
    margin:0px;
    padding:0px;
}

.top
{
    display:inline-block;
    width:800px;
}

.bottom
{
    display:inline-block;
}

.topMiddle
{
    display:inline;
    background-color:Yellow;
    float:left; 
    width:300px;   
}

.topLeft
{
    display:inline;   
    float:left;     
    width:250px; 
}

.topRight
{
    display:inline;    
    float:left; 
    width:250px;     
}

.bottomLeft
{
    display:inline;
    width:400px;
    float:left;
    background-color:Orange;
}

.bottomRight
{
    display:inline;
    width:400px;
    float:left;
    background-color:Lime;
}

Answer 2

试试用这个....

<style>
.validator ul li { text-align:left; }
</style>

编辑

根据需要将 padding left 或 margin left 设置为 ul ...

.validator ul { padding-left: 100px; }

Answer 3

嘿，你可以定义你的父母text-align left center right

根据您的设计