Validation Summary vertical alignment - asp.net

Question

I have a two column layout page with a Validation Summary (VS) control above the 2 columns. The VS is centered in the container above the columns, which is what I want, but I also want the different bullet points to be vertically aligned, if possible. I have tried several things, including placing the VS inside a div (inside the container div that is center aligned) with text-align:left;, but that moves the entire div to the side of the container. I have also tried making the div text-align:center; and the VS text-align:left;, but that also moves the entire block all the way to the left. I've also tried the same thing with a table, but no luck.
This is in Firefox by the way. I haven't tested in other browsers, but it needs to work in FF.
Here is pic to show the messed up vertical alignment:
And here is the code for my VS control, without my alignment attempts (if more code is needed, let me know):
<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">
Could somebody help me vertically align those bullet points in the center of the page?

Answer 1

Since bullet points are part of the list items I don't think you will be able to align them. Why not try something like having a top column with 3 divs and place your validationsummary control in the middle one. Try this
HTML Code
<div id="container" class="container">
<div id="top" class="top">
<div id="topLeft" class="topLeft">
</div>
<div id="topMiddle" class="topMiddle">
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
</div>
<div id="topRight" class="topRight">
</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

Hey you may define your parent text-align left center right
according to your design

Answer 3

Try using this one....
<style>
.validator ul li { text-align:left; }
</style>
Edit
Set padding left or margin left to ul as you want...
.validator ul { padding-left: 100px; }