image is not coming in middle

hi i have one image enter.jpg this is not coming in the middle of the i want it to come in the middle .how it will come to the middle .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
#layout {
background:url("images/background/login_page.jpg") no-repeat scroll 0 0 #EEEEEE;
height:700px;
margin:0 auto;
padding:0;
width:1024px;
}
#gib_holder {
height:690px;
padding:5px;
}
.ui-corner-all {
-moz-border-radius:4px 4px 4px 4px !important;
}
.gib {
background-color:#EEEEEE;
height:624px;
overflow:hidden;
width:1014px;
}
#tb_navigate {
background:url("arrow.png") no-repeat scroll 0 0 transparent !important;
border:1px solid #FFFFFF;
float:right;
height:40px;
margin-top:-300px;
position:relative;
width:13px;
}
#gib_enterleave {
background:none repeat scroll 0 0 #000000;
display:none;
float:right;
margin-top:-628px;
opacity:0.4;
width:25px;
}
#tb_leave{  
    background-image:url(leave.png)!important;  
}
#tb_enter{
    background-image:url(enter.png)!important;
}
#tb_lock{
    background-image:url(icon_lock.png)!important;
}
.gib_nav {
    background-color:transparent;
    background-repeat:repeat-x;
    border:medium none;
    cursor:pointer;
    display:table-cell;
    float:right;
    height:624px;
    position:relative;
    top:50%;
    vertical-align:middle;
    width:25px;
}
</style>
</head>
<body>
<div id="layout">
<div id="gib_holder"><div id="gib_container">     <div id="gib_titlebar"></div>  
<div class="gib-O gib" id="gib1">
    <div id="title"><br></div>
    <div style="float: left; width: 100px;" id="img"></div>
    </div></div>           </div>
    <div style="display: block;" class="toolbar" id="toolbar">
        <div id="tb_navigate" style="display: block;"></div>
        <div id="gib_enterleave" style="display: block;">
            <div class="gib_nav" id="tb_enter" style="display: block;"></div>
            <div class="gib_nav" id="tb_leave" style="display: none;"></div>                    
            <div class="gib_nav" id="tb_knock" style="display: none;"></div>
        </div>

    </div>
</div>
</div>
</body>
</html>
<script  type='text/javascript'>
$(document).ready(function() {


});


</script>

Answers


Your html is a bit malformed. In particular, there are a bunch of </div> that don't seem to fit in.

Anyway, to center a background image, you can use background-position:

#tb_enter {
  background-image: url(enter.png) !important;
  background-position: center center;
}

Need Your Help

Chroma key shader for WebCamTexture in Unity3D

c# image-processing unity3d shader chromakey

How can I make chroma key attribute to eleminate a color from WebCamTexture. WebCamTexture provides very limited control on texture.

Is there a cross-OS GUI framework that supports embedding HTML pages?

c# javascript python tidesdk

I want to develop a desktop app to be used cross-system (win, mac, linux), is there a GUI framework that would allow me to write code once for all 3 platforms and have a fully-scriptable embedded web

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.