个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我想在父 div 中同时对齐图像和 div(水平和垂直居中)，但我做不到，我已经尝试了 2 天。我正在使用 bootstrap 4、HTML5、CSS3
图片以某种方式没有显示在代码片段中
<!-- Welcome Area -->
<div class="container-fluid p-0">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12" style="background-image: url(assets/images/main-img.jpg);">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 text-center">
<img src="assets/images/auscene-icon-buttons-12-t.png" class="img-responsive img-fluid" id="welcome-area-img" style="visibility: hidden;" />
</div>
</div>
</div>
</div>
<!-- End Welcome Area -->
<!-- Main area -->
<div class="container-fluid">
<div class="row pt-4 pb-4 mb-5 px-0">
<div class="col-sm-2 col-md-1 col-lg-1 col-xl-1 px-0 text-center" style="width: 10% !important;" id="show-last-news-title">
<img src="assets/images/auscene_icon_button_01_Y9u_icon.ico" class="img-responsive img-fluid pt-4" id="auscene-image-1">
</div>
<div class="col-sm-2 col-md-1 col-lg-1 col-xl-1 px-0 text-center" style="width: 10% !important;" id="show-last-how-to-title">
<img src="assets/images/auscene_icon_button_02_xYm_icon.ico" class="img-responsive img-fluid pt-4" id="auscene-image-2">
</div>
<div class="col-sm-4 col-md-8 col-md-push-8 col-lg-8 col-xl-8 px-0" style="width: 60% !important;">
<h1 class="text-left" style="font-size:3.5rem; color:#5acfc2; font-family:LouisGeorgeCafe;" id="welcome-area-title">Issue #01
</h1>
<h1 class="text-left" style="font-size:2rem; font-family:LouisGeorgeCafe;" id="welcome-area-subtitle"></h1>
</div>
<div class="col-sm-2 col-md-1 col-lg-1 col-xl-1 px-0 text-center" style="width: 10% !important;" id="show-last-guide-to-aucians-title">
<img src="assets/images/auscene_icon_button_03_ClJ_icon.ico" class="img-responsive img-fluid pt-4" id="auscene-image-3">
</div>
<div class="col-sm-2 col-md-1 col-lg-1 col-xl-1 px-0 text-center" style="width: 10% !important;" id="show-last-in-depth-title">
<img src="assets/images/auscene_icon_button_04_JP2_icon.ico" class="img-responsive img-fluid pt-4" id="auscene-image-4">
</div>
</div>
</div>
<!-- End of Main area -->已更新解决了无法对齐图片死点重叠问题后，现在div自动取20px的高度，而不是div背景图片的高度
最佳答案
您可以在下面找到使用最新的 Bootstrap 和其他样式所需的效果。请注意，这也纠正了您在代码示例中使用正确的 header 、图像链接和 Bootstrap 类的不一致。
我已经放置了内联样式，但如果需要，您可以将它们移动到单独的文件中。
容器设置为 View 高度的 100%，以便将大图像(包含行)垂直居中。较小的图像由 calc 函数垂直对齐，我们将图像从顶部绝对放置 50% 减去图像高度的一半(如果您在下面添加 @media ref，则必须考虑到这一点)。
请注意，这两个图像都是响应式的，但由于较小的图像在调整大小之前保持其原始大小的时间更长，因此在较小的设备上看起来它比背景图像大。您可以使用 @media 规则或更高级的 CSS 更改此设置，但这不在您的问题范围内。
(考虑使用背景图片代替 Ng-Sek-Long 的建议)
<!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>Centered images</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<!-- Welcome area -->
<div class="container-fluid d-flex justify-content-center align-items-center" style="min-height: 100vh;">
<div class="row">
<div class="col-xs-12" style="position: relative;">
<img src="https://www.gruberreisen.at/fileadmin/redakteure/Website/slider/Header_Startseite1.jpg" class="img-fluid" />
<div style="position: absolute; left: 0; top: calc(50% - 132px); width: 100%; text-align: center;">
<img src="http://placehold.it/269x265/ccc.jpg" class="img-fluid" />
</div>
</div>
</div>
</div>
</body>
</html>
关于html - 居中对齐(V＆H)一个div与父div中的一个img？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52142396/
24
4
0
我想替换每一个 带结束标记 字符串中的标记。该字符串实际上是一个 html 文档，其中 img 标记由我生成，并且始终如下所示: Src 是用户输入，所以它可以是任何东西。我做了一个正则表达式，不确
我使用数组通过 getElementsByClassName 存储我所有的 imgs。 我需要知道哪个 img 被点击或 mouseover/mouseout，所以我使用循环来检查哪个 img 被点击
我正在尝试使用图像制作一款类似 Match3 的游戏，但我无法进行比较。我正在为固定数量的 atm 执行此操作，只是为了让它正常工作，稍后应该在 foreach 循环中。如果有什么区别的话，该函数位于
我希望你能帮助我:) 我想定义 img 的高度，相对于图像的“实际”宽度。但宽度是动态的，因为它占父对象的百分比(wxample 的浏览器窗口)。 为什么我需要高度？:没有高度它工作正常，但我需要它，
我知道这个话题被讨论了很多，但我找不到任何适合我的解决方案。所以，我的代码大致是: var img =me.images[curID] var f = function() { var
我试图在一个页面上列出多个图像，但当您单击图像时，它会以模式打开。 它适用于第一张图片，但不适用于其他图片，我假设这是一个 JS 问题，我尝试设置一个空的 var，然后将其设置为获取元素 ID(每个
任务:我们正在通过 HttpWebRequest 抓取 HTML 内容(约 6,000 个调用)。该字符串经过修剪并存储在 SQL Server 2014 数据库中，以便作为 XML 进行处理。 问题
我从上面得到这个错误，不知道如何避免它。我的目的是获取屏幕截图，然后对其进行模板匹配，以查看此时屏幕上是否显示图标。到目前为止，它只是图标的位置。我的代码: #include "opencv2/hig
我有一个包含图像的容器，该图像是从应用程序加载的，因此容器的尺寸是已知的，而图像会有所不同。 我目前有以下 css: #secondary_photos { height: 100px; wi
我正在尝试设置一个随分辨率缩放但看起来仍然不错的页面背景..这就是我正在使用的.. 站点是http://www.gd-gaming.com/wordpress ，如果你用 Firebug 检查它，它只
目前我有 如何删除包装 img 标签的 p 标签？ 所以我可以得到.. 最佳答案 使用 $('p > img').unwrap(''); 这将删除 img 周围的所有 p。您应该使用 cl
我想要动画 3 .svg图片: 和css : .sequence { position: relative; } .sequence img { position: ab
我有外部 RSS 提要填充以下重复出现的类 elements 。 {teaserImage} {teaserImage} {teaserImage} 我想简单地获取 :first 实例，该实例也是来自
转换为 Base64 这是一个独特的问题: 我不想使用浏览器 JavaScript 来解决这个问题，请继续阅读... 我要转换 通过编译应用程序( ng build 或 ng serve )到 Base64 img 标签，
悬停在 中的第一张图片上标记，我需要使用 CSS 增加第二张图片的不透明度。我试过使用 +和 ~运营商，无法让它发挥作用。任何帮助将不胜感激。 最佳答案 a:hover + img
我已经尝试解决这个问题有一段时间了，但我迷路了，有人吗？ for(var i=0; i<10; i++) { var Img = new Image(); Img.onload = (
这就是我想要实现的目标: 当用户将鼠标悬停在较小的图像之一上时: 较小的图像 + 文本应替换较大的图像 + 文本。 当用户没有悬停时；将大集返回到其原始图像和文字。 这就是我到目前为止所拥有的。它没有
我知道如何在 php 中执行此操作，但我需要在 javascript/jquery 中完成此操作。 我正在尝试执行以下操作: $('#NewBox').html( $('#OldBox').html(
我正在使用一个 CMS (ExpressionEngine)，它将段落标签包裹在图像周围。我正在使用响应式图像(最大宽度:100％)，并且由于我还在段落上定义宽度，因此它会导致问题。我想使用 jQue
Tinymce 正在删除我的 img 结束标记并生成无效的 xhtml。 它变成了这个 进入这个 我也在使用 codemagic，但是在查看 html 时它仍然显示 .我也试过包括 , 但输出是
我是一名优秀的程序员,十分优秀！