对齐页面底部的两个按钮答案

【问题标题】：Align two buttons at the bottom of the page对齐页面底部的两个按钮
【发布时间】：2019-11-22 21:44:59
【问题描述】：

我必须对齐页面底部的两个按钮，但我做不到。一个是“图库”按钮，另一个是图标链接。

<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;
}

这两个按钮没有对齐。这个问题在移动设备上尤为常见

解决方案？谢谢

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

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

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

HTML

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

CSS

body{
    position:relative;
}
button{
    position:absolute;
    bottom:0;        
}
button:last-child{
    left:100px;
}

【讨论】：

我更喜欢选项位置：固定，谢谢！但是如何将这两个按钮放在页面的中心底部？
你可以添加```

``` . to-bottom {位置：固定；宽度：100%；文本对齐：居中；底部：0；左：0； }

【解决方案2】：

也许你可以用这个：

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

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

【讨论】：

【解决方案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>

【讨论】：

您能否进一步解释这段代码的工作原理和作用？