在过去的几个小时里，我一直在尝试获得一个居中并自动缩小到其内容的响应式框。
我不知道如何让它工作。
我正在使用这个:
display: inline-block;
这样我就可以让它适合他的内容，并将弹出窗口与中心对齐:
text-align: center;
但我不知道如何让它响应。
编辑:
抱歉，代码丢失了! 这是:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
.ModalWrapper {
width: 100%;
height: 100%;
position: fixed;
text-align: center;
}
.ModalPopup {
background: #ffffff;
border-radius: 5px;
display: inline-block;
border: solid thin #19b4b5;
}
.ModalTop {
text-align: center !important;
width: 100%;
height: 30%;
min-height: 30%;
padding-top: 5%;
padding-bottom: 5%;
top: 0px;
left: 0px;
background-color: #19b4b5;
}
.ModalContent {
display: inline-block;
margin: 10px;
}
</style>
</head>
<body>
<div id="fb-root"></div>
<script language="javascript" type="text/javascript">
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.8";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="ModalWrapper">
<div class="ModalPopup">
<div class="ModalTop">Your Post</div>
<div class="ModalContent">
<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-show-text="true">
<blockquote cite="https://www.facebook.com/20531316728/posts/10154009990506729/" class="fb-xfbml-parse-ignore"></blockquote>
</div>
</div>
</div>
</div>
</body>
</html>
这还没有优化，我是网络开发的新手。
非常感谢您的时间和帮助!
最佳答案
您可以使用 Bootstrap 来添加响应能力。 HTML 有点麻烦，但效果很好并且易于使用。在这里下载 Bootstrap:
然后通过将弹出窗口包装在“行”div 中来实现它:
<div class="row">
和另一个指定大小的 div，例如:
<div class="col-md-4">
不同大小和布局的网格将使您能够灵活地确定您想要的响应速度。
您可以在此处查看如何使用 Bootstrap 网格的许多示例:
关于javascript - 适合他的内容的响应式居中弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40534532/