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=开发者_StackOverflow中文版"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>
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;
}
加载中,请稍侯......
精彩评论