当动态内容出现在其下方时，防止垂直居中的 DIV 移动

Question

Below is an example of a very simple webpage.下面是一个非常简单的网页示例。 It's a portfolio site - a name, then links to stuff.这是一个投资组合网站 - 一个名字，然后链接到东西。 When hovering over the links, a one-line description is shown below.将鼠标悬停在链接上时，下面会显示一行描述。 The problem is that because the container is centered vertically, the dynamic content re-centers everything - how can I stop this?问题是因为容器垂直居中，动态内容重新居中 - 我怎么能阻止这种情况？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        html, body {
            height: 100%;
        }

        .container-middle {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #main-div {
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container-middle">
        <div id="main-div">
            <h1>CLIENT NAME</h1>      
            <p>
                <a class="toggle-hover" data-id="proj1" href="http://google.com">Project 1</a> |
                <a class="toggle-hover" data-id="proj2" href="http://google.com">Something else</a> | 
                <a class="toggle-hover" data-id="proj3" href="http://google.com">Project 3</a> | 
                <a class="toggle-hover" data-id="proj4" href="http://google.com">LinkedIn</a>
            </p> 
            <div id="proj1" style="display: none;">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis pretium ligula, quis eleifend odio pulvinar a.</p>
            </div>
            <div id="proj2" style="display: none;">
                <p>Cras orci nulla, ultrices eu magna et, suscipit vulputate diam.</p>
            </div>
            <div id="proj3" style="display: none;">
                <p>Curabitur aliquam ante et metus consectetur, nec interdum mi imperdiet. Donec auctor eros felis, et posuere est dictum in.</p>
            </div>
            <div id="proj4" style="display: none;">
                <p>Sed sed porta enim, ac consectetur dui. </p>
            </div>

        </div>
    </div>
</body>

<script>
    $(".toggle-hover").hover(function(){
        var divid = $(this).attr('data-id');
        $("#" + divid).slideToggle();
    });
</script>
</html>

Answer 1

The problem is that because the container is centered vertically, the dynamic content re-centers everything - how can I stop this?问题是因为容器垂直居中，动态内容重新居中 - 我怎么能阻止这种情况？

I've implemented a solution below that keeps your jQuery logic for targeting your captions, but instead of using slideToggle (a jQuery animation), I've set it to toggle a CSS class that we can transition.我已经在下面实现了一个解决方案，使您的 jQuery 逻辑用于定位您的标题，但我没有使用slideToggle （一个 jQuery 动画），而是将它设置为切换一个我们可以转换的 CSS 类。

Then I created a container called .descriptions to hold your captions, so we can style them with position: absolute - which has two benefits: it lets them exist all in the same space, and it prevents them from affecting the layout and positioning of other elements.然后我创建了一个名为.descriptions的容器来保存您的标题，因此我们可以使用position: absolute来设置它们的样式 - 这有两个好处：它可以让它们全部存在于同一个空间中，并且可以防止它们影响其他的布局和定位元素。

Working demo below:下面的工作演示：

 $(".toggle-hover").hover(function() { var divid = $(this).attr('data-id'); $("#" + divid).toggleClass('show'); });

 html, body { height: 100%; } .container-middle { height: 100%; display: flex; justify-content: center; align-items: center; } #main-div { text-align: center; } .descriptions { position: relative; } .descriptions div { opacity: 0; position: absolute; transition: 1s opacity, 1s transform; transform: translateY(-10px); width: 100%; } .descriptions div.show { opacity: 1; transform: none; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container-middle"> <div id="main-div"> <h1>CLIENT NAME</h1> <p> <a class="toggle-hover" data-id="proj1" href="http://google.com">Project 1</a> | <a class="toggle-hover" data-id="proj2" href="http://google.com">Something else</a> | <a class="toggle-hover" data-id="proj3" href="http://google.com">Project 3</a> | <a class="toggle-hover" data-id="proj4" href="http://google.com">LinkedIn</a> </p> <div class="descriptions"> <div id="proj1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis pretium ligula, quis eleifend odio pulvinar a.</p> </div> <div id="proj2"> <p>Cras orci nulla, ultrices eu magna et, suscipit vulputate diam.</p> </div> <div id="proj3"> <p>Curabitur aliquam ante et metus consectetur, nec interdum mi imperdiet. Donec auctor eros felis, et posuere est dictum in.</p> </div> <div id="proj4"> <p>Sed sed porta enim, ac consectetur dui. </p> </div> </div> </div> </div>

当动态内容出现在其下方时，防止垂直居中的 DIV 移动

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-09-27 02:23:29

当动态内容出现在其下方时，防止垂直居中的 DIV 移动

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-09-27 02:23:29

解决方案1
0 已采纳 2017-09-27 02:23:29