How to center an image using Css in Code behind

mpdillon
mpdillon used Ask the Experts™
on
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.
View of current web site
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
HI
your applied classes are causing this.

In your classes :- .left_image and .right_image
You have added definition as:
float:left

And this is causing issue.

Just for testing make it as:
float:right

Your all images should move to right side.

For solution, remove that first and try by adding text-align: center
Also add same for
image_table_outer_div also.

Hope this helps you.
.left_image
        {
            background-color: purple;
            width: 33%;
            float: left;
            text-align:center;
        }
        .right_image {
            background-color: aliceblue;
            width: 67%;
            float: left;
            text-align:center;
        }

Open in new window

Author

Commented:
Thank you. That worked perfectly. I thought that attribute was being deprecated. But I am going to use it.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial