Avatar of mpdillon
mpdillon
 asked on

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.
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
ASP.NETASPCSS

Avatar of undefined
Last Comment
mpdillon

8/22/2022 - Mon
Mrunal

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.
ASKER CERTIFIED SOLUTION
sajayj2009

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
mpdillon

ASKER
Thank you. That worked perfectly. I thought that attribute was being deprecated. But I am going to use it.
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23