正文 

当前位置： 首页 > 源码 >

如何响应地在相对 div（图像）上方居中绝对 div（文本）？

     2023-03-29     13

关键词：

【中文标题】如何响应地在相对 div（图像）上方居中绝对 div（文本）？【英文标题】：How to center absolute div (text) above relative div (image) responsively? 【发布时间】：2014-09-10 21:44:55 【问题描述】：

我正在使用 Twitter Bootstrap 构建一个模板，并尝试使文本在图像上方水平和垂直居中，例如： 我正在尝试这个：

<div class="container"> <!--Bootstrap-->
  <div class="row"> <!--Bootstrap-->
    <div class="col-md-4"> <!--Bootstrap-->

        <div class="box">
           <div class="thumb"><img src="..."></div>
           <div class="title">Post title</div>
        </div>

    </div> <!--Bootstrap-->
  </div> <!--Bootstrap-->
</div> <!--Bootstrap-->

.box height:350px; width:100%; border:4px solid #fff;
.thumb position:relative; width:100%; height:100%; overflow: hidden;
.thumb imgwidth:100%; height:100%; overflow: hidden;
.title position:absolute;

有了这个，如果我使用一些值 top 到 div title 它会出现在 img 上方，但我无法将其水平或垂直居中。

到目前为止，我搜索的所有内容都不起作用：left:50%, left:0 和 right:0; margin:auto 等等...

我也不打算将 img 用作 css 背景。

我怎样才能做到这一点？

【问题讨论】：

你能在这个项目中使用display:table-cell吗？ 我尝试使用 display:table 到 thumb div 和 display:table-cell 加上 vertical-align:middle 到 title div，但是没有用 【参考方案1】：

您当前的代码不起作用，因为您没有应用 top:0 和 width:100% 或 left 和 right 值。您还需要将position:relative 添加到box，以便正确放置绝对定位的标题。我建议将可变高标题居中是使用display:table-cell。唯一的问题（除了兼容性）是它还需要添加另一个元素（一些围绕.title 文本的包装元素）。你可以在这里看到这个解决方案：http://jsfiddle.net/dx44c/3/

表格单元格的兼容性：http://caniuse.com/#search=table

必需的标记：

    <div class="box">
        <div class="thumb"><img src="//lorempixel.com/712/342"></div>
        <div class="title"><div>Post title</div></div>
    </div>

所需的 CSS：

.box position: relative; height:350px; width:100%; border:4px solid #fff;
.thumb position:relative; width:100%; height:100%; overflow: hidden;
.thumb imgwidth:100%; height:100%; overflow: hidden;
.title 
    position:absolute;
    background: rgba(0,0,0,0.5);
    color: white;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    display: table;

.title div 
    display: table-cell;
    vertical-align: middle;
    padding: 0 20%;

编辑：在table-cell 上添加了更多文本和一些填充的更好示例

【讨论】：

谢谢，成功了！但我猜是因为.title 上的width:100% 和height:100%，我无法在.thumb img 上使用不透明悬停效果（因此，.thumb img:hover）。有办法吗？ 我会改用.box:hover .thumb img。看起来您不需要支持 IE 6，所以我认为我们可以排除它不是具有 :hover 规则的锚的问题。 :P 编辑：这是一个例子。 jsfiddle.net/dx44c/4【参考方案2】：

要将标题水平居中，只需给出 .title text-align: center;使位置相对并给出底部 60%；如下图：

<head>
<style>
.box position:relative; height:350px; width:100%; border:4px solid #fff;
.thumb position:relative; width:100%; height:100%; overflow: hidden;
.thumb imgwidth:100%; height:100%; overflow: hidden;

.title position:relative; 
font-weight: bold; 
bottom: 60%;
color: white; 
text-align: center;
padding: 0px 10px;
width: 97%;


</style>
</head>
<body>
<div class="container"> <!--Bootstrap-->
  <div class="row"> <!--Bootstrap-->
    <div class="col-md-4"> <!--Bootstrap-->

        <div class="box">
           <div class="thumb"><img src="http://cache.graphicslib.viator.com/graphicslib/media/a8/sunset-cruise-on-the-sydney-harbour-photo_5361064-fit468x296.jpg"></div>
           <div class="title">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
            </div>
        </div>

    </div> <!--Bootstrap-->
  </div> <!--Bootstrap-->
</div> <!--Bootstrap-->
</body>

【讨论】：

【参考方案3】：

CSS Flexbox 是垂直居中的另一个选项。

演示：http://jsfiddle.net/cQ5GG/（如果需要，添加额外的供应商前缀）

<style>
.thumb 
    width: 400px;
    height: 200px;
    display: -webkit-flex;
    display: flex;


.caption 
    margin: auto;
    text-align: center;
    color: #fff;
    font: bold 16px/150% Arial,sans-serif;

</style>

<div class="thumb" style="background: url(http://css-tricks.com/wp-content/csstricks-uploads/transpBlack50.png), url(http://lorempixel.com/400/200/)">
    <div class="caption">
        This is my caption<br>
        Multiple lines<br>
        For example...
    </div>
</div>

【讨论】：

如何在响应式页面上的 div 内垂直和水平居中两个图像

】如何在响应式页面上的div内垂直和水平居中两个图像【英文标题】：Howtoverticallyandhorizontallycentertwoimagesinsideadivonaresponsivepage【发布时间】：2017-01-2204:50:49【问题描述】：我正在使用Skeleton和Normalizecss。我想在div容器内垂直和水... 查看详情

如何仅使用 CSS 将绝对元素自动居中在相对父级内？

】如何仅使用CSS将绝对元素自动居中在相对父级内？【英文标题】：HowtoautomaticallycenteranabsoluteelementinsidearelativeparentwithCSSonly?【发布时间】：2014-02-0223:46:17【问题描述】：我看到有一些关于这个主题的帖子，但没有一个专门回答... 查看详情

如何在 100% 宽度的 div 内水平居中绝对定位的元素？ [复制]

】如何在100%宽度的div内水平居中绝对定位的元素？[复制]【英文标题】：HowdoIhorizontallycenteranabsolutepositionedelementinsidea100%widthdiv?[duplicate]【发布时间】：2013-05-2110:05:28【问题描述】：在下面的示例中，#logo是绝对定位的，我需要它... 查看详情

Bootstrap 3和div中垂直居中的响应图像[重复]

...ndiv[duplicate]【发布时间】：2017-12-2522:02:05【问题描述】：如何使图像在Div/Row中垂直居中。我已经搜索过了，但所有的解决方案似乎都表明这是一个很好的解决方案——但它对我不起作用。我正在使用Bootstrap3...https://w 查看详情

html绝对定位的元素如何让它始终居中？

如题。。3Q参考技术A既然是绝对定位，就没有居中这一说法，因为居中肯定参考某一值来居中的，例如参考浏览器居中。应该是相对对位，如果是相对定位的话，直接margin:0auto就可以了。另外，我估计你的意思是某一个DIV块是绝... 查看详情

将按钮置于底部上方

...个白色按钮定位在距底部稍稍（~10px）的位置，同时保持响应（即更改视口的高度保持按钮相对于div底部的位置）。我试过flexboxanswer和绝对/相对定位，但徒劳无功。以下是有问题的divs：.item2background-color:#EF5350;width:50%; 查看详情

在响应式方形 div 中垂直居中图像

】在响应式方形div中垂直居中图像【英文标题】：verticallycenterimagewithinresponsivesquarediv【发布时间】：2014-07-0806:38:00【问题描述】：我正在尝试将图像居中在一个div内，该div可以响应地缩放并且始终是方形的。JSFiddle感谢很棒的CSS... 查看详情

如何使响应式 SVG 图像居中？ [复制]

】如何使响应式SVG图像居中？[复制]【英文标题】：HowdoIcenteraresponsiveSVGimage?[duplicate]【发布时间】：2017-05-2718:38:42【问题描述】：我正在尝试在它的容器内水平对齐这个SVG（在这种情况下，它可以是任何div、body或其他任何东西... 查看详情

如何将图像的一半从 div 响应中定位出来

】如何将图像的一半从div响应中定位出来【英文标题】：Howtopositionhalfofimageoutofthedivresponsive【发布时间】：2017-09-0303:46:51【问题描述】：我想将图标定位在红色方块所在的位置。但是我已经尝试过position:relative和positionabsolute但我... 查看详情

创建多个 Wordpress 类别 div

...ss网站。它被设置为有一个后div（填充：20%0；为了一致的响应高度）然后有一个绝对定位的div，垂直/水平居中在这个div上方。html<divclass="indx-img"style="bac 查看详情

将图像居中放在 div 中的文本上 [重复]

...图像在容器中居中。我创建了THISPEN来展示我所拥有的。如何根据演示图像创建类 查看详情

如何使具有相对宽度的 div 居中？

】如何使具有相对宽度的div居中？【英文标题】：Howtocenteradivwitharelativewidth?【发布时间】：2013-10-0906:44:48【问题描述】：我有一个&lt;div&gt;，其样式如下：.contentwidth:70%;要使div居中，可以将边距设置为自动(margin:0auto;)，但... 查看详情

如何使用 CSS 将绝对 div 水平居中？

】如何使用CSS将绝对div水平居中？【英文标题】：HowtocenterabsolutedivhorizontallyusingCSS?【发布时间】：2013-08-0108:51:22【问题描述】：我有一个div并希望它水平居中-尽管我给它margin:0auto;它没有居中....containerposition:absolute;top:15px;z-index:... 查看详情

如何使用 CSS 将绝对 div 水平居中？

】如何使用CSS将绝对div水平居中？【英文标题】：HowtocenterabsolutedivhorizontallyusingCSS?【发布时间】：2013-08-0108:51:22【问题描述】：我有一个div并希望它水平居中-尽管我给它margin:0auto;它没有居中....containerposition:absolute;top:15px;z-index:... 查看详情

居中并裁剪 div 内的图像 [重复]

...一张图片要从中取出（裁剪），有点像这样：所以它完美地在中间并且具有相同的纵横比。我所能做的就是像这样裁剪图像：..它连接到边缘的地方。所以基本上，我想要一个固定大小的div，里面有一个图像。此图 查看详情

css如何让div相对body居中而其中的控件不受影响。

需要准备的材料分别有：电脑、浏览器、html编辑器。1、首先，打开html编辑器，新建html文件，例如：index.html。2、将index.html中的<body>替换为：<bodystyle="text-align:center;"><divstyle="margin:auto;width:200px;height:70px;bord... 查看详情

如何让div垂直居中（23种方法总结）

参考技术A开篇序言：之前在华南理工大学计算机研究所面试，被一个老师抓着这个问题问了一下午当时回答的很窘迫，大概只说出七八种后面发现也有小伙伴遇到过这个面试题所以今日来份总结绝对定位在这个例子中会设置top:5... 查看详情

如何垂直居中响应式剪切图像？

】如何垂直居中响应式剪切图像？【英文标题】：Howtoverticallycenteraresponsiveclippedimage?【发布时间】：2017-05-3019:25:55【问题描述】：我正在尝试将被剪裁的图像垂直居中。图像是响应式的。在移动设备上，图像是全尺寸的，看起来... 查看详情