Question

我的问题是将图像保留在侧边栏的底部。当我能够将它集中在一起时，它想要加入更高层次的链接并且不会下来，当我强行将它放到底部时，我无法将其置于中心而没有危险边缘黑客。

.sidebar {
  height: 100vh;
  max-width: 25%;
  float: left;
  font-family: 'Pontano Sans', sans-serif;
  position: fixed;
 }

  .sidebar li:nth-of-type(1) {
        padding-top: 10%;
      }


.sidebar li {
  color: #8B2500;
  margin-top: 40px;
  list-style: none;
  text-align: center;
  margin-left: -35px;
  font-size: 20px;
}
  #add {
    display: block;
    margin: 0 auto;
    bottom: 0;
    position: absolute;
    width: 80px;
    height: 80px;
  }

html：

<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
            <ul>
                <li> <a href="#"> About </a></li>
                <li> <a href="docs.html"> Providers </a></li>
                <li> <a href="#"> Quality </a> </li>
                <li> <a href="#"> Contact </a> </li>
            </ul>
            <img id="add" src="images/phoner.png"></img>
        </nav>

有问题的图片是#add。位置：绝对;根据需要将它带到底部，但是将它漂浮在左边，并且位置：相对;根据需要将其置于中心位置，但从底部拉出。感谢任何投入，谢谢。

Answer 1

你几乎就在那里，当你使用position时，positiong元素在中心的技巧：绝对是通过添加左，上，右，下50％并减去你想要的元素大小的一半到中心。在你的情况下你只需要

<强> CSS

#add {
    display: block; // remove
    margin: 0 auto; // remove
    bottom: 0;
    left: 50%; //added
    margin-left: -40px; //added
    position: absolute;
    width: 80px;
    height: 80px;
  }

请参阅我的示例fiddle

Answer 2

试试这个应该有效

<nav class="sidebar"><img class="logo" src="images/logo.png"></img>
            <ul>
                <li> <a href="#"> About </a></li>
                <li> <a href="docs.html"> Providers </a></li>
                <li> <a href="#"> Quality </a> </li>
                <li> <a href="#"> Contact </a> </li>
            </ul>
            <div class="clear"></div>
            <img id="add" src="images/phoner.png"></img>
        </nav>

.sidebar {
  height: 100vh;
  max-width: 25%;
  float: left;
  font-family: 'Pontano Sans', sans-serif;
  position: fixed;
 }

  .sidebar li:nth-of-type(1) {
        padding-top: 10%;
      }


.sidebar li {
  color: #8B2500;
  margin-top: 40px;
  list-style: none;
  text-align: center;
  margin-left: -35px;
  font-size: 20px;
}
  #add {
     bottom: 0;
    display: block;
    margin: 0 auto;
    bottom: 0;
    position: absolute;
    width: 80px;
    height: 80px;
  }
.clear{
  clear: both;
}

Answer 3

你能添加一个容器元素吗？这样可以防止您需要明确的大小或边距。

＆＃13;

.sidebar {
  height: 80vh;
  max-width: 25%;
  position: fixed;
  background: pink;
  min-width: 300px;
  min-height: 150px;
}
.stuck-centered {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;

}
#add {
  display: block;
  margin: 0 auto;
}
body {
  padding: 30px;
}

＆＃13;

<nav class="sidebar">
  <ul>
    <li><a href="#">About</a></li>
  </ul>
  <div class="stuck-centered">
    <img id="add" src="http://placehold.it/80x80"></img>
  </div>
</nav>

＆＃13;

<强> Full demo

Answer 4

.COOLelement{ 
    position:fixed; 
    margin:0 auto; 
    bottom:0;
    width: 100px; 
    height: 10px; 
}

居中图像并将其保持在底部

4 个答案: