Question

我必须在页面底部对齐两个按钮，但我不能这样做。一个是按钮“gallery”，另一个是图标linkedin。

<div class="container fill">
 <div id="myCarousel" class="carousel slide">
  <div class="carousel-inner">
  <div class="item">    
    <div class="fill" style="background-image:url('http://www.mysite/images/category/image.jpg');background-position: center;">
   <div class="container">
  <div class="carousel-caption">
      <h1>TITLE</h1>
      <p class="lead">Description</p>
    </div> 
</div>
 <div class="pull-right">
  <a class="btn btn-large btn-primary" href="categories.php?id=17">View Gallery</a>
 </div>
  </div>
   </div>
     </div>
 <div class="pull-left">
  <div class="social-caption">
      <button class="btn btn-large btn-linkedin">
       <i class="icon-linkedin"></i><span><a style="color:white" vhref="http://www.linkedin.com/"> | Linkedin</span></button>
      </div>

两个按钮的CSS：

.social-caption {
  background-color: transparent;
  position: relative;
  max-width: 100%;
  padding: 0 20px;
  bottom: 45px;
  left: 5px;
}


.gallery-button { 
  background-color: transparent; 
  position: relative;
  max-width: 100%;
  padding: 0 20px; 
  bottom: 45px;
  right: 5px;
}

两个按钮看起来没有对齐。移动设备尤其适用于此问题

解决方案？感谢

Answer 1

您可以执行类似 THIS 的操作。它使用position:absolute来定位页面内容（bottom:0）底部的按钮 - 或相对于其父级定位的按钮（在本例中为body。替代方法是使用{ {1}}这将确保按钮始终显示在视口的底部。

查看absolute positioning和fixed positioning之间的区别。

HTML

position:fixed

CSS

<button>Button 1</button>
<button>Button 2</button>

Answer 2

也许您可以使用此

：

<input type='button' style='position:fixed; top:94%; left:82%; width:100px' value='

这意味着该按钮将出现在页面底部的右上角。

Answer 3

 //hope so this code helps you.

.center{
 justify-content: center;
 display:flex;
 align-item: center
}

.right{
    justify-content: flex-end;
    display:flex;
 }

//for center align
<div class="center">
    <button>First Button</button>
    <button>Second Button</button>
</div>

//for right align
<div class="right">
    <button>First Button</button>
    <button>Second Button</button>
</div>

对齐页面底部的两个按钮

3 个答案: