在移动响应视图中居中图像
问题描述 投票：0回答：3
我正在开发一个带有
BootstrapFontAwesome<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<style>
.tr {
border: none;
}
.ebp_container {
/* What you need */
position: relative;
/* the code below is only for this example */
width: 300px;
/*background-color: yellow;*/
margin: 10px;
padding: 20px;
}
.ebp_video {
/* What you need */
position: relative;
z-index: 2;
/* the code below is only for this example */
width: 80px;
/* height: 100px;*/
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--eniac-blue);
cursor: pointer;
/*Background*/
border-radius: 15px;
/*Centering the images*/
display: block;
margin-left: auto;
margin-right: auto;
}
.ebp_video:hover {
/* background-color: rgba(255,255,255,0.1);*/
opacity: 0.9
}
.ebp_pdf {
/* What you need */
position: absolute;
top: 70px; /* change value to desired position */
right: 90px; /* change value to desired position */
z-index: 1;
/* the code below is only for this example */
width: 35px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.ebp_pdf:hover {
opacity: 0.9
}
.ebp_wrapper {
float: left;
width: 25%;
align-items: center;
}
@media screen and (max-width: 985px) {
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 100%;
}
.ebp_wrapper {
float: none;
margin: auto;
width: 60%;
}
}
</style>
<div class="container" style="margin-top: 50px;">
<div class="ebp_wrapper">
<div class="ebp_container">
<h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
<a href="#" target=”_blank”><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
<div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
</div>
</div>
<div class="ebp_wrapper">
<div class="ebp_container">
<h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
<a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
<div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
</div>
</div>
<div class="ebp_wrapper">
<div class="ebp_container">
<h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
<a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
<div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
</div>
</div>
<div class="ebp_wrapper">
<div class="ebp_container">
<h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
<a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
<div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
现在，我正在尝试创建一个移动响应式视图，其中图像居中且位于彼此下方。然而，当我尝试将其居中时，它会将其放在右侧而不是中间。
桌面视图中的按钮：
移动视图中的按钮：如您所见，它与可选按钮相距甚远（黄色矩形）
问题是，我怎样才能将这些图像居中？
编辑：我的第一次尝试是使用 Bootstrap，但是更改屏幕尺寸会使两个按钮彼此分开。
3个回答
1
投票
投票
响应时的宽度导致溢出。它设置为大于视口的宽度并且溢出。
你似乎也有一些立场：绝对的东西，这对于你的图标的定位来说似乎基本上是不必要的。当它响应时，我已将其重置回基础，但我猜从代码角度来看，它在桌面上并不是很完美。
我会通过创建一个代码片段来更新您的问题，该代码片段可以更准确地表示本地遇到的视觉问题，以确保每个人都能准确地看到问题。即包括您的图像参考和颜色。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<style>
.tr {
border: none;
}
.ebp_container {
/* What you need */
position: relative;
/* the code below is only for this example */
width: 300px;
/*background-color: yellow;*/
margin: 10px;
padding: 20px;
}
.ebp_video {
/* What you need */
position: relative;
z-index: 2;
/* the code below is only for this example */
width: 80px;
/* height: 100px;*/
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--eniac-blue);
cursor: pointer;
/*Background*/
border-radius: 15px;
/*Centering the immages*/
display: block;
margin-left: auto;
margin-right: auto;
}
.ebp_video:hover {
/* background-color: rgba(255,255,255,0.1);*/
opacity: 0.9
}
.ebp_pdf {
/* What you need */
position: absolute;
top: 70px; /* change value to desired position */
right: 90px; /* change value to desired position */
z-index: 1;
/* the code below is only for this example */
width: 35px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.ebp_pdf:hover {
opacity: 0.9
}
.ebp_wrapper {
float: left;
width: 25%;
align-items: center;
}
@media screen and (max-width: 985px) {
.ebp_container {
width: auto;
text-align: center;
}
.ebp_pdf,
.ebp_video {
position: static;
display:inline-block;
width: auto;
}
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 100%;
}
.ebp_wrapper {
float: none;
margin: auto;
width: 60%;
}
}
</style>
<div class="container" style="margin-top: 50px;">
<div class="ebp_wrapper">
<div class="ebp_container">
<h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
<a href="#" target=”_blank”><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
<div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
</div>
</div>
<div class="ebp_wrapper">
<div class="ebp_container">
<h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
<a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
<div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
</div>
</div>
<div class="ebp_wrapper">
<div class="ebp_container">
<h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
<a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
<div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
</div>
</div>
<div class="ebp_wrapper">
<div class="ebp_container">
<h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
<a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
<div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>1
投票
投票
看来您遇到问题是因为您的
.ebp_container { width: 300px}如果您将其更改为
.ebp_container { width: 100%; }
在您的媒体查询中，它应该按您想要的方式工作
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<style>
.tr {
border: none;
}
.ebp_container {
/* What you need */
position: relative;
/* the code below is only for this example */
width: 300px;
/*background-color: yellow;*/
margin: 10px;
padding: 20px;
}
.ebp_video {
/* What you need */
position: relative;
z-index: 2;
/* the code below is only for this example */
width: 80px;
/* height: 100px;*/
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--eniac-blue);
cursor: pointer;
/*Background*/
border-radius: 15px;
/*Centering the images*/
display: block;
margin-left: auto;
margin-right: auto;
}
.ebp_video:hover {
/* background-color: rgba(255,255,255,0.1);*/
opacity: 0.9
}
.ebp_pdf {
/* What you need */
position: absolute;
top: 70px; /* change value to desired position */
right: 90px; /* change value to desired position */
z-index: 1;
/* the code below is only for this example */
width: 35px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.ebp_pdf:hover {
opacity: 0.9
}
.ebp_wrapper {
float: left;
width: 25%;
align-items: center;
}
@media screen and (max-width: 985px) {
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 100%;
}
.ebp_wrapper {
float: none;
margin: auto;
width: 60%;
}
.ebp_container {
width: 100%;
}
}
</style>
<div class="container" style="margin-top: 50px;">
<div class="ebp_wrapper">
<div class="ebp_container">
<h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
<a href="#" target=”_blank”><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
<div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
</div>
</div>
<div class="ebp_wrapper">
<div class="ebp_container">
<h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
<a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
<div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
</div>
</div>
<div class="ebp_wrapper">
<div class="ebp_container">
<h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
<a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
<div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
</div>
</div>
<div class="ebp_wrapper">
<div class="ebp_container">
<h5 style="margin-bottom: 50px" class="font-weight-bold">Some Text</h5>
<a href="#"><div class="ebp_pdf far fa-file-pdf fa-3x" style="color: #b3001b"></div></a>
<div><img class="ebp_video" src="eplay.png" data-toggle="modal" data-target="#exampleModal" /></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>-1
投票
投票
<style>
.tr {
border: none;
}
.ebp_container {
/* What you need */
position: relative;
/* the code below is only for this example */
width: 300px;
/*background-color: yellow;*/
margin: 10px;
padding: 20px;
}
.ebp_video {
/* What you need */
position: relative;
z-index: 2;
/* the code below is only for this example */
width: 80px;
/* height: 100px;*/
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--eniac-blue);
cursor: pointer;
/*Background*/
border-radius: 15px;
/*Centering the immages*/
display: block;
margin-left: auto;
margin-right: auto;
}
.ebp_video:hover {
/* background-color: rgba(255,255,255,0.1);*/
opacity: 0.9
}
.ebp_pdf {
/* What you need */
position: absolute;
top: 70px; /* change value to desired position */
right: 90px; /* change value to desired position */
z-index: 1;
/* the code below is only for this example */
width: 35px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.ebp_pdf:hover {
opacity: 0.9
}
.ebp_wrapper {
float: left;
width: 25%;
align-items: center;
}
@media screen and (max-width: 985px) {
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 100%;
}
.ebp_wrapper {
width: 100%;
text-align: center;
}
.ebp_container {
margin: auto;
}
}
</style>
最新问题
- 在异步任务中执行的 Blazor 可等待任务会使其重新实例化？
- 如何修复 JavaScript 函数中的“记住包含括号”错误？
- vba selenium webautomate 但图表未定义
- 如何解决错误：无法复制...重试次数超过 10。失败。 - VS 2017
- 在 malloc() 之后使用 memset() 会导致断言
- 打字时弹出不需要的搜索框
- 在 Typescript 中如何正确声明 Mercurius 解析器？
- EF Core 连接表播种问题
- 如何解析CIMPLICITY的ctx文件
- 对于具有许多过滤器的大型电子商务应用程序，规范 URL 应该是什么？
- 创建具有 3 种不同价格的商品
- 如何使用fastkml获取KML的样式信息？
- 如何在Python中高效地找到两个大列表之间的共同元素，同时保持顺序？
- 很棒的通知图标未显示
- 拉取请求修饰在 SonarQube 和 Gitlab 中不起作用
- 我正在编写一个脚本以使用 sqlcmd 在终端中运行。我的脚本需要一些变量，但如果其中一个或多个变量不在 -v
- 添加新文件后无法启动cocos
- 如何在 Swing 中将 JScrollPane 与 JTextArea 结合使用？
- 将参数从 .cmd 传递到 .exe
- 如何将Bacnet集成到arduino中
© www.soinside.com 2019 - 2024. All rights reserved.