文章/答案/技术大牛

发布

社区首页 >问答首页 >引导:如何垂直对元素

问引导:如何垂直对元素
EN

Stack Overflow用户

提问于 2017-01-23 19:01:57

回答 3查看 1.1K关注 0票数 0

我正在做一个网站，将主要显示在手机上。我用的是引导4。

目前，我正试图在可用空间中显示一个必须以“垂直”为中心的元素。

我的意思是:我有一个使用固定大小的标题，在div中有一个消息+2按钮，需要显示在可用空间的垂直中间(没有溢出)。

我发现了这一点：垂直对齐与引导带3 ->引导4片段不起作用--另外一个答案是关于灵活的盒子是有希望的，但是如果我只有一个组件应该使用所有剩余的空间，它就不能工作。

此外，还有一件事:我需要垂直对齐的元素通过jquery调用显示：

$('#btToShow').click(function(){
   $('#card-container').fadeOut(200, function(){$('#wait-for-result-container').fadeIn();});
});

$('#change-choice').click(function(){
   $('#wait-for-result-container').fadeOut(200, function(){$('#card-container').fadeIn();});
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Some page</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
        crossorigin="anonymous">
</head>

<body>
    <H1 class="text-center page-header">Somelist</H1>
    <div id="card-container" class="container show center-block">
        <div id="card-subcontainer" class="row center-block">
          <!-- Here there is normally a lot of buttons -->
          <button class="btn" id="btToShow">Show</button>
        </div>
    </div>

    <div id="wait-for-result-container" class="container center-block text-center m-7" style="display: none;">
            <h2>This is the part that is absolutely not vertically aligned</h2>
            <div>
                <button class="btn btn-primary btn-lg">Wait for it...</button>
                <button id="change-choice" class="btn btn-danger">Change the choice</button>
            </div>
    </div>



<script src="https://code.jquery.com/jquery-3.1.1.min.js"     crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
    crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.2.0/js/mdb.min.js" crossorigin="anonymous"></script>-->
</body>

</html>

你知道如何在中间垂直对齐#wait-for-result-container的内容吗？

html

css

bootstrap-4

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-01-23 21:00:27

此方法对于Bootstrap 3.x非常有效：

#wait-for-result-container {
  position:absolute;
  left:0;
  right:0;
  top:50%;
  -webkit-transform:translateY(-50%) !important;
  -ms-transform:translateY(-50%) !important;
  transform:translateY(-50%) !important;
}

top:50%设置div 1/2沿容器的位置，然后transform:translateY(-50%)将其移回一半的距离，使得相对于父容器的对象具有良好的垂直中心。

票数 2

Stack Overflow用户

发布于 2017-01-23 19:06:13

您可以使用柔性盒垂直中心内容。

#wait-for-result-container {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100vh;
}

codePen

使用fadeIn和display: flex

$("#wait-for-result-container")
    .css("display", "flex")
    .hide()
    .fadeIn();

票数 3

Stack Overflow用户

发布于 2017-01-23 19:45:02

你可以绝对地定位它：

#wait-for-result-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
}

$('#btToShow').click(function(){
   $('#card-container').fadeOut(200, function(){$('#wait-for-result-container').fadeIn();});
});

$('#change-choice').click(function(){
   $('#wait-for-result-container').fadeOut(200, function(){$('#card-container').fadeIn();});
});

#wait-for-result-container {
  position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Some page</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
        crossorigin="anonymous">
</head>

<body>
    <H1 class="text-center page-header">Somelist</H1>
    <div id="card-container" class="container show center-block">
        <div id="card-subcontainer" class="row center-block">
          <!-- Here there is normally a lot of buttons -->
          <button class="btn" id="btToShow">Show</button>
        </div>
    </div>

    <div id="wait-for-result-container" class="container center-block text-center m-7" style="display: none;">
            <h2>This is the part that is absolutely not vertically aligned</h2>
            <div>
                <button class="btn btn-primary btn-lg">Wait for it...</button>
                <button id="change-choice" class="btn btn-danger">Change the choice</button>
            </div>
    </div>



<script src="https://code.jquery.com/jquery-3.1.1.min.js"     crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
    crossorigin="anonymous"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.2.0/js/mdb.min.js" crossorigin="anonymous"></script>-->
</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41813721

复制

相似问题

问引导:如何垂直对元素
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导:如何垂直对元素EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问引导:如何垂直对元素
EN