Link to home
Create AccountLog in
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.
User generated image
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
Avatar of Mrunal
Mrunal
Flag of India image

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
Avatar of sajayj2009
sajayj2009

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of mpdillon
mpdillon

ASKER

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