在移动响应视图中居中图像
问题描述 投票：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>
最新问题
- 严格两相锁定示例
- Firebase Analytics logEvent 异步运行
- 当refit=True时，为什么要在RandomizedSearchCV之后进行额外的拟合？
- 通过子字符串列表过滤DataFrame
- 在docker中使用buildkit并运行--mount，为什么cabal install下载缓存的包？
- 在分离器中读取多个帧
- 为什么 tls.Client 失败并显示消息：第一条记录看起来不像 TLS 握手
- 大师冥想错误：ESP32 上的 Core 1 Panic'ed（禁止加载）
- 从 PDF 中提取包含空单元格且没有可见边缘的表格
- 打开表单时输入参数值对话框
- 闪亮：<-: replacement has length zero when using wrapping X Axis Label
- Excel 夜班时间
- 为什么我在向此端点发送 HTTP 请求时收到此错误？使用 Spring Boot
- 如何调用传入 lambda 表达式的函数？
- Wix.com - 是否可以从集合中引用联系人（或成员）？
- 为 infix 定义一个方案函数
- XML LINQ 匹配麻烦
- 星图质心
- 如何在C++中将原始指针转换为唯一指针
- 过滤器锁定算法
© www.soinside.com 2019 - 2024. All rights reserved.