Question

嗨我有一个图像enter.jpg这不是在我希望它来到中间的中间。它会来到中间。

<!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>

Answer 1

你的HTML有点格格不入。特别是，有一堆</div>似乎不适合。

无论如何，要将背景图像居中，您可以使用background-position：

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

图像不是在中间

1 个答案: