如何在引导程序 3 的 div 中间放置一个按钮？ [复制]答案

【问题标题】：How to put a button in the middle of a div in bootstrap 3? [duplicate]如何在引导程序 3 的 div 中间放置一个按钮？ [复制]
【发布时间】：2021-02-16 01:22:29
【问题描述】：

在我的带有 bootstrap 3 的 html 中，我在带有 col-xs- 类的 div 中定义了 3 列。

第一个和第三个是列表。在中间列中，我想放置一个按钮，通过 jquery 将元素从第一个列表传输到第三个列表。

我希望按钮位于两个列表的中间并具有响应性。这个我试过了，但是这个按钮没有很好地在中间居中，并且不能很好地适应屏幕的不同宽度。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-xs-3">
    ... list1 code
</div>
<div class="col-xs-3 ">
    <div class="contenedor-de-lista father" style="background-color: skyblue;">
        <div class="text-center">
              <button type="button" class="btn btn-default child"> > </button>
        </div>
    </div>
</div>
<div class="col-xs-6">
    ... list3 code
</div>

div{
    height: 50rem;
}

.contenedor-de-lista { 
  height: 50rem;
}

.father{
  position: relative;
}
.child {
  /* Center vertically and horizontally */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */
}

https://jsfiddle.net/JorgePalaciosZaratiegui/vn8sgrcq/18/

当引导类 col-md-x 起作用时，如何使按钮保持在中间并适应屏幕大小。

提前致谢

【问题讨论】：

transform:translate(-50%,-50%) 而不是 margin: -25px 0 0 -25px; 虽然我推荐使用自动边距的 flex 方法

标签： html css twitter-bootstrap-3

【解决方案1】：

您可以使用flex 来居中元素。我已经编辑了你的代码。

将display: flex添加到.text-center类中

div{
    height: 50rem;
}

.contenedor-de-lista { 
  height: 50rem;
}

.father{
  position: relative;
}
.text-center{
  display:flex;
  justify-content:center;
  align-items:center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="col-xs-3">
    ... list1 code
</div>
<div class="col-xs-3 ">
    <div class="contenedor-de-lista father" style="background-color: skyblue;">
        <div class="text-center">
              <button type="button" class="btn btn-default child"> > </button>
        </div>
    </div>
</div>
<div class="col-xs-6">
    ... list3 code
</div>

【讨论】：

【解决方案2】：

#container{
display:flex;
justify-content:space-between;
align-items:flex-start;
}

.father{
display:flex;
flex-direction:column;
justify-content:center;
height:100vh;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id='container'>
<div >
    ... list1 code
</div>
<div >
  <div class="contenedor-de-lista father" style="background-color: skyblue;">
        
              <button type="button" class="btn btn-default child"> > </button>
        
    </div>
</div>
<div >
    ... list3 code
</div>

</div>

【讨论】：