图浮动影响居中

时间:2019-03-19 19:24:13

标签: html css

我试图在页面上添加后退按钮,将其放在左上角,它是浮动的。

但是由于我将其添加到track-image的中心位置已受到影响,因此将其推入3 rem,即后退浮动按钮的宽度。

HTML

  <body>  
    <a href="entry.html" style="display: inline-block; float: left;">
      <img src="backArrow.png" style="width:3rem; margin: .5rem; float: left">
    </a>
    <div id="track">
      <img id="track-image" src="track.png">
      <p id="track-fraud"> Track Fraud </p><br>
    </div>
  </body>

CSS

#track {
    text-align: center; 
}

#track-fraud {
    font-size: 3rem;
    margin: 0;
}

#track-image {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 10rem;
}

2 个答案:

答案 0 :(得分:1)

通常,我建议您避免使用float,因为它对页面的其余部分具有怪异的含义。

仍然,在jsFiddle上尝试,float在您的上下文中有效:

.topContainer{
  background-color:black;
  width:90%;
  text-align:center;
  padding:20px;
}

.backButton{
  float:left;
  width:30px;
  height:30px;
  background-color:red;
}

.centerImage{
  background-color:blue;
  width:200px;
  height:30px;
}

.topElement{
  display:inline-block;
}
<div class="topContainer">
  <div class="backButton topElement"></div>
  <div class="centerImage topElement">
    TrackFraud
  </div>
</div>

也许您应该在顶部栏的元素中添加“ display:inline-block”?

答案 1 :(得分:0)

您可以在按钮上使用position:absolute,它将移出文档流,因此不再将其他内容推到上方。 https://jsfiddle.net/7frLasx5/

#track {
   text-align: center; 
}

.track-back {
  position: absolute;
  left: 10px;
}

#track-fraud {
    font-size: 3rem;
    margin: 0;
}

#track-image {
    margin-top: 1rem;
    margin-bottom: 1rem;
    width: 10rem;
}