Question

JSFIDDLE

HTML:

<div class="SummaryTable">

    <div class="AddressContainer">

        <div class="Address">
          <b>Ship To: </b>
            <ul>
                <li>John Smith</li>
                <li>45 Holland drv.</li>
            </ul>
        </div>

            <div class="Address">
             <b>Bill To: </b>
                <ul>
                    <li>John Smith</li>
                    <li>P.O Box 456</li>
                </ul>
            </div>
    </div>
</div>

CSS:

.SummaryTable
{
width: 650px;   
text-align:center;
}


.SummaryTable .AddressContainer
{
width:650px;
}

.SummaryTable .Address
{
width:323px;
background-color:Yellow;
float:left;
border: 1px solid black;
height:200px;
}

.Address ul
{
width:130px;
min-width:130px;
max-width: 280px;
margin-left:auto;
margin-right:auto;
background-color:Green;
text-align:left;
padding:0px;
}

.Address li
{
list-style-type: none;
}

JSFIDDLE

• I want to keep the green box\element (ul) centred in the 323px wide/200px or Auto high (.Address) layer both horizontally and vertically.
• I have achieved horizontal centering of <ul> by setting fixed width + margin:0px auto, but addresses vary in length and I don’t just want some fixed size box where one longer address would appear centred under (Ship To\Bill To) heading and another shorter one will look out of place since text is aligned to the left.

• I want to see the text in the <li> stretch to the <ul> green box up to the maximum-width setting (e.g 280px) and the green box, whatever its size will be to remain centered horizontally and vertically in the .Address layer and consequently under the Ship To\Bill To headings.

• Main reason for this is that shorter addresses would look offset to the left in a fixed width ul element and if I make the width small than a line break would ensue for longer address, spreading the first and last name and or address over two lines. Using centrally aligned text in the ul element
  -Of course solves this problem, but I need left aligned text.

Answer 1

DEMO jsBin

If I understood well your question

Here is the modified CSS:

.SummaryTable{
  width: 650px;   
  text-align:center;
}    
.AddressContainer{
  width:650px;
}   
.Address{
  width:323px;
  background-color:white;
  float:left;
  border: 1px solid black;
  height:200px;
}
.address b{
    display:block;           /*should do the trick*/
}
.Address ul{
  display:inline-block;     /*should do the trick*/
  background-color:orange; 
  text-align:left;
  padding:0px; 
}
.Address li{
    list-style-type: none;
}

I removed some margin-reft/right:auto, widths, min-width, max width and formatted a bit your .summaryTable css ‘appearances’. Than a bit of playing with display property have done the trick.

Here is a demo using jQuery : demo jsBin with jQ