Css 对中仅适用于固定定位,而非绝对定位
我有一个div,我正试图将图像居中。如果将“位置”设置为“固定”,则图像会完全居中,但如果将“位置”设置为“绝对”,则图像向右偏多了几个像素 我不能将position设置为fixed,因为当用户单击某个内容时,这个div会从顶部滚动进来,所以直到那一刻我才能看到它。我以前从来没有遇到过这个问题。谁能告诉我怎么了 html:Css 对中仅适用于固定定位,而非绝对定位,css,position,centering,Css,Position,Centering,我有一个div,我正试图将图像居中。如果将“位置”设置为“固定”,则图像会完全居中,但如果将“位置”设置为“绝对”,则图像向右偏多了几个像素 我不能将position设置为fixed,因为当用户单击某个内容时,这个div会从顶部滚动进来,所以直到那一刻我才能看到它。我以前从来没有遇到过这个问题。谁能告诉我怎么了 html: 这是由于盒子的大小。当您的位置固定时,它是相对于整个屏幕的周期。定位绝对位置时,它相对于最近的非静态父位置。在您的情况下,这是您的div.header。你的div.heade
这是由于盒子的大小。当您的位置固定时,它是相对于整个屏幕的周期。定位绝对位置时,它相对于最近的非静态父位置。在您的情况下,这是您的div.header。你的div.header有一个填充和100%的宽度,所以它实际上是100%+20。设置框大小:在div.header上设置边框框,图像将向左移动几个像素。:)
<div class="header">
<img class="logo" src="img/navbar_title.jpg"/>
<img class="tab" src="img/mid_tab.png" /><!-- image to be centered -->
<div class="header_social">
<img src="img/button_pg.jpg" />
<img src="img/button_facebook.jpg" />
<img src="img/button_twitter.jpg" />
</div>
</div>
.header
{
position:fixed;
top:-100px;
width:100%;
height:30px;
padding:10px;
background-color:black;
color: white;
z-index:10;
margin-top:0px;
box-shadow: gray 3px 0px 10px;
}
.header .logo
{
position: absolute;
top: 10px;
z-index: 4;
left: 20px;
}
.header .tab { /* not working right */
position: absolute;
top: 0;
z-index: 4;
left: 50%;
transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
.header h1
{
font-family: Helvetica, sans-serif;
font-weight: bold;
font-size:14pt;
display:inline-block;
line-height:30px;
float:left;
margin-top: 0;
margin-left: 20px;
letter-spacing: .05em;
color: #303030;
}
.header .header_social
{
float:right;
height:30px;
line-height:30px;
width:150px;
}