Question

我有一个两列布局页面，在2列之上有一个验证摘要（VS）控件。 VS位于列上方的容器中心，这正是我想要的，但我也希望不同的子弹点垂直对齐，如果可能的话。我尝试了几种方法，包括将VS放在div（位于中心对齐的容器div内）与text-align:left;之间，但是将整个div移动到容器的一侧。我也试过制作div text-align:center;和VS text-align:left;，但这也将整个块一直移到左边。我也用桌子试过同样的东西，但没有运气这是在Firefox中的方式。我没有在其他浏览器中测试，但它需要在FF中工作这是用于显示混乱的垂直对齐的图片：
enter image description here

这是我的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>

修改

根据需要将左侧填充或左侧边距设置为ul ...

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

Answer 3

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

根据您的设计

验证摘要垂直对齐

3 个答案: