Solved: How to center an image using Css in Code behind

I am creating a two column flow (i.e. table) using Div's. I have everything worked out except I cannot figure out how to center the image inside the DIV. Below you will see my code. Hopefully there is enough there for you to provide some suggestions. The left div is set to 33% and the right div is set to 67%. There is a master page but I am working on the content page.

Here is what the web page looks like now.

Here is the code in my code behind file

Public Class SidePanel1
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        LoadCategoryListBox()
        LoadImage()
    
    End Sub
    Private Sub LoadCategoryListBox()
        Me.CategoryListBox1.Items.Add("Milk")
        Me.CategoryListBox1.Items.Add("Tea")
        Me.CategoryListBox1.Items.Add("")
        Me.CategoryListBox1.Items.Add("Sugar")
    End Sub
    
    Private Sub LoadImage()
        Dim divContentLeftImage As New System.Web.UI.HtmlControls.HtmlGenericControl("DIV")
        Dim divContentRightImage As New System.Web.UI.HtmlControls.HtmlGenericControl("DIV")
        Dim divContentClearFloat As New System.Web.UI.HtmlControls.HtmlGenericControl("DIV")
        '
        divContentLeftImage.ID = "first_image_div"
        divContentLeftImage.Attributes("class") = "left_image"
        Dim ImageLeft As New Image
        ImageLeft.Height = "150"
        ImageLeft.Width = "150"
        ImageLeft.ImageUrl = "images/boatbig.png"
        ImageLeft.AlternateText = "Alternate text for BigBoat"
        '
        divContentLeftImage.Controls.Add(ImageLeft)
        '
        divContentRightImage.ID = "first_image_div"
        divContentRightImage.Attributes("class") = "right_image"
        Dim ImageRight As New Image
        ImageRight.Height = "150"
        ImageRight.Width = "150"
        ImageRight.ImageUrl = "images/boatbig.png"
        ImageRight.AlternateText = "Alternate text for BigBoat"
        '
        divContentRightImage.Controls.Add(ImageRight)
        '
        divContentClearFloat.ID = "first_clear_float_div"
        divContentClearFloat.Attributes("class") = "clear_float"
        '
        '
        Me.image_table_outer_div.Controls.Add(divContentLeftImage)
        Me.image_table_outer_div.Controls.Add(divContentRightImage)
        Me.image_table_outer_div.Controls.Add(divContentClearFloat)
        '
        '
        divContentLeftImage.ID = "second_image_div"
        divContentLeftImage.Attributes("class") = "left_image"
        'Dim ImageLeft As New Image
        ImageLeft.Height = "150"
        ImageLeft.Width = "150"
        ImageLeft.ImageUrl = "images/boatbig.png"
        ImageLeft.AlternateText = "Alternate text for BigBoat"
        '
        divContentLeftImage.Controls.Add(ImageLeft)
        '
        divContentRightImage.ID = "second_image_div"
        divContentRightImage.Attributes("class") = "right_image"
        'Dim ImageRight As New Image
        ImageRight.Height = "150"
        ImageRight.Width = "150"
        ImageRight.ImageUrl = "images/boatbig.png"
        ImageRight.AlternateText = "Alternate text for BigBoat"
        '
        divContentRightImage.Controls.Add(ImageRight)
        '
        divContentClearFloat.ID = "first_clear_float_div"
        divContentClearFloat.Attributes("class") = "clear_float"

    End Sub
End Class

Open in new window

Here is the source code from the .aspx page. Note that at the moment the CSS code is in this file. I will move it later to an external file.

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/SidePanel.Master" CodeBehind="SidePanel.aspx.vb" Inherits="GiftProgram.SidePanel1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <style type="text/css">
        .SidePanelList   
        { 
           font: 10pt Verdana; 
           font-weight:700;
           color: Green;
           background-color:bisque;
        }
        #image_table_outer_div 
        {
          background-color: chartreuse;
          width: 100%;
        }
        .left_image
        {
            background-color: purple;
            width: 33%;
            float: left;
        }
        .right_image {
        background-color: aliceblue;
            width: 67%;
            float: left;
        }
        .LeftText
        {
            background-color: red;
            width: 33%;
            float: left;
        }
        .RightText
        {
        background-color: lightsalmon;
            width: 67%;
            float: left;
        }
        .clear_float
        {
        clear: both;
        background-color:transparent;

        }
        .ImageDiv
        {
        border: none;
        display: block;
        margin: auto;
        }
    </style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphContent" runat="server">
    <div id="image_table_outer_div" runat="server">
    </div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphLeftNavigation" runat="server">
    <asp:ListBox ID="CategoryListBox1" runat="server"  CssClass="SidePanelList"></asp:ListBox>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="cphFooter" runat="server">
</asp:Content>

Open in new window

Just for good measure here is the .aspx code from the master page.

<%@ Master Language="VB" AutoEventWireup="false" CodeBehind="SidePanel.master.vb" Inherits="GiftProgram.SidePanel" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
    <style type="text/css">
        #container
        {
              width: 780px;
              border: solid 1px black;
              margin: 0px auto;
        }
        #header
        {
              color: #FFFFFF;
              width: 100%;     height: 100px;
              background-color: #F7CB33; 
        }
        #sidePanel
        {
              width: 170px;     
              margin-top: 5px;
              padding-right: 6em;
              padding-left: 4em;
              background-color: #778CB3;
              color: #FFFFFF;   padding: 4px;
        }
        #content
        {
              width: 610px;     float: right;
              margin-top: 5px;
              background-color: #A0AFCB;
        }
        #footer
        {
              background-color: #F7CB33;
              padding: 12px;    width: 649px;
              color: #000000; font-size: 90%;
              text-align: center;     clear: both;
              border-top: 5px solid #FFFFFF;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="container">
        <div id="header">
            <h4>Web Application Name</h4>
        </div>
        <div id="content">
          <asp:ScriptManager ID="script" runat="server">
          </asp:ScriptManager>
          <asp:ContentPlaceHolder ID="cphContent" runat="server">
          </asp:ContentPlaceHolder>
          <asp:ValidationSummary ID="valSummary" runat="server"              
            DisplayMode="BulletList" />
        </div>
        <div id="sidePanel">
            <asp:ContentPlaceHolder ID="cphLeftNavigation" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id="footer">
            <p>Common Footer Content</p>
            <asp:ContentPlaceHolder ID="cphFooter" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>
    </form>
</body>
</html>

Open in new window

I apologize if I have overdone it with inclusion of my code. But since I do not know how to solve the problem, I do not know what code I should show.

Thanks,
pat