正文 

当前位置： 首页 > 源码 >

无法居中：在 div 中的图像与其他内容之前

     2023-03-05     243

关键词：

【中文标题】无法居中：在 div 中的图像与其他内容之前【英文标题】：Unable to center :before image in div with other content 【发布时间】：2014-07-12 14:51:57 【问题描述】：

我试图在 :before 伪元素中垂直居中图像。我在这里（和其他地方）发现了一些关于它的问题，但不幸的是我无法使用这些提示。

我想将图像居中放在 to 文本行之间：

一个 js 小提琴：

http://jsfiddle.net/kaze72/vb5z4/1/

<div class="body">
    <div class="welcomeHeader">         
        <h3>Welcome</h3>
        <h6>Adam Testorsson</h6>
    </div>
    <p>other stuff</p>
</div>

主css：

.welcomeHeader 
    padding-left: 30px;
    display: inline-block;


.welcomeHeader:before 
    background-image: url('http://www.ronnebybloggen.se/pics/apml.png');
    /* background-position: 0px -20px; */
    display: inline-block;
    content: ' ';
    vertical-align: -50%;
    width: 12px;
    height: 12px;
    margin-left: -22px;
    margin-top: -3px;

【问题讨论】：

vertical-align 将不起作用，因为您试图将其与两个块级标题对齐......并且在任何情况下（-505）在该属性中都是无效的。 我从这个得到了 -50%：***.com/questions/2833027/…，但是这个小费对我不起作用。 感谢大家的建议和cmets :-) 【参考方案1】：

就是这样：http://jsfiddle.net/vb5z4/5/

此解决方案基于background-position：我将 :before 元素设为其父元素的 100% 高度，并将其背景设置为其垂直中心。

.welcomeHeader 


   padding-left: 30px;
    display: inline-block;
    position: relative; // Need the parent to be relative


.welcomeHeader:before 
    position: absolute; // :before becomes absolute
    top: 0;
    left: 0;
    background-image: url('http://www.ronnebybloggen.se/pics/apml.png');
    background-repeat: no-repeat; // don't repeat background
    background-position: left center;
    display: inline-block;
    content: ' ';

    width: 12px;
    height: 100%;
    margin-left: -22px;
    margin-top: -3px;


* 
    font-size: 13px;
    margin: 5px;

这种技术的好处是即使你改变了背景，它仍然是垂直居中的，不需要固定负边距（这取决于图像高度）。

【讨论】：

+1 干净的方法。但是，不需要负边距。绝对定位的元素必须理想地使用 top/left 定位。【参考方案2】：

将position:relative; 添加到.welcomeHeader。 删除边距并将其添加到.welcomeHeader:before

position: absolute;
    top: 50%;
    left: 0;
    margin-top: -6px;

我已经更新了你fiddle。看看吧。

【讨论】：

【参考方案3】：

如果您仍希望使用 pseduo 元素，最好使用绝对位置。

JSfiddle Demo

HTML

<div class="body">
    <div class="welcomeHeader">         
        <h3>Welcome</h3>
        <h6>Adam Testorsson</h6>
    </div>
    <p>other stuff</p>
</div>

CSS

.welcomeHeader 
    padding-left: 30px;
    display: inline-block;
    position: relative;


.welcomeHeader:before 
    background-image: url('http://www.ronnebybloggen.se/pics/apml.png');
    /* background-position: 0px -20px; */
    content: ' ';
    width: 12px;
    height: 12px;
    position: absolute;
    top:50%;
    margin-top: -6px; /* half of height */
    left:0; /* or someother required value */



* 
    font-size: 13px;
    margin: 5px;


h6 
    font-weight: normal;

【讨论】：

子 div 中的内容与父 div 重叠

...221:03:10【问题描述】：我的对话列表的内容重叠，我似乎无法调试它。我正在使用vue，代码与css和图像一起在这里。我想要发生的是在预期的结果图像中，其中内容将保留在卡片的div中，就像在messenger中一样，如果文本太长，它... 查看详情

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

...效果如下图所示，鞋子位于Desrupt(?)文本上方。但是，我无法使图像在容器中居中。我创建了THISPEN来展示我所拥有的。如何根据演示图像创建类 查看详情

div中的图像-鼠标悬停在潜水中的任何位置

...-到目前为止它只会向上移动将鼠标悬停在图像本身上时-无法将css添加到整个内容框，因为我不希望其他内容移动，只是图像。（参见 查看详情

在 AdminLte 内容包装器 div 中垂直居中图像

】在AdminLte内容包装器div中垂直居中图像【英文标题】：VerticallycenteranimagewithinanAdminLtecontent-wrapperdiv【发布时间】：2021-03-0518:27:39【问题描述】：我正在使用AdminLte模板，我将其用作布局。在我要放置内容的部分是这样的：<divc... 查看详情

居中 li: 在文本内容之前

...的样式。它看起来像这样：+abc+123+hello我遇到的问题是我无法将+与实际的li居中。就像，所以当我需要它们与li文本垂直对齐时，这些优点会略微偏离。有人知道我在做什么错吗？这是小 查看详情

在 flexbox 中将文本与图像居中

】在flexbox中将文本与图像居中【英文标题】：Centertextwithimagesinflexbox【发布时间】：2017-02-2804:18:03【问题描述】：我正在制作一个网页，需要将3个div居中对齐作为促销内容，如下所示：为了获得这种间距和对齐方式，我添加了... 查看详情

在 ASP.NET 中的 DIV 内水平和垂直居中图像

】在ASP.NET中的DIV内水平和垂直居中图像【英文标题】：centeringanimagehorizontallandverticallyinsideaDIVinASP.NET【发布时间】：2012-11-2613:09:09【问题描述】：我想在div中间显示一个ASP.NET图像（水平和垂直），我应该如何排列我的div和图像... 查看详情

如何在其他div中垂直居中div [重复]

】如何在其他div中垂直居中div[重复]【英文标题】：Howtocenterdivverticallyinotherdiv[duplicate]【发布时间】：2021-11-0804:04:04【问题描述】：在我的代码中，我有一个带有背景图像的部分元素，我想在上面放置一个div元素，例如this但我不... 查看详情

在 div 内水平居中图像

】在div内水平居中图像【英文标题】：Centerimagehorizontallywithinadiv【发布时间】：2012-06-1421:32:02【问题描述】：这可能是一个愚蠢的问题，但由于通常的居中对齐图像的方法不起作用，我想我会问。如何在其容器div内居中对齐（水... 查看详情

将左浮动 div 中的图像与右浮动 div 上的文本垂直对齐

...问题，我在内容页面上有2个div（在内容包装器中），我无法让图像与旁边的文本对齐。.text-blockposition:relative;float:right; 查看详情

在 jQuery Mobile 中垂直居中 DIV 的内容

】在jQueryMobile中垂直居中DIV的内容【英文标题】：VerticallycentrethecontentsofaDIVinjQueryMobile【发布时间】：2012-04-0516:55:43【问题描述】：我正在尝试在中间垂直对齐jQuery网格块的内容，以便它与同一行中的其他元素对齐。<divclass="ui... 查看详情

无法在图像中间显示文本

】无法在图像中间显示文本【英文标题】：cantgetmytekstinthemiddleofmyimage【发布时间】：2020-04-1115:13:35【问题描述】：我正在与我的代码作斗争，但无法弄清楚为什么我不能让它像我想要的那样工作，我试图让我的图像中的文本居... 查看详情

角度/引导轮播中的图像不居中

】角度/引导轮播中的图像不居中【英文标题】：imageinangular/bootstrapcarouseldoesn\'tcenter【发布时间】：2021-01-2611:36:08【问题描述】：我一直在尝试将图像置于页面中心。我尝试在中心对齐内容并在中心对齐项目，但都不起作用。保... 查看详情

如何将导航栏项目与居中图像的左侧和右侧对齐？

】如何将导航栏项目与居中图像的左侧和右侧对齐？【英文标题】：HowcanIalignmynavbaritemstotheleftandrightsideofthecenteredimage?【发布时间】：2022-01-1221:34:37【问题描述】：我正在Blazor中使用Bootstrap5.1版开发一个网站。所以我在那个导航... 查看详情

在 div 中裁剪和居中任意大小的图像

】在div中裁剪和居中任意大小的图像【英文标题】：Cropandcenterarbitrarily-sizedimagewithinadiv【发布时间】：2014-02-2700:03:46【问题描述】：我有一个div，我想在其中放置任何任意大小的图像，最好使用img标签而不是CSSbackground-image样式... 查看详情

调整大小以适合 div 中的图像，并水平和垂直居中

】调整大小以适合div中的图像，并水平和垂直居中【英文标题】：Resizetofitimageindiv,andcenterhorizontallyandvertically【发布时间】：2013-06-2314:56:42【问题描述】：我在div中有一张图片。我希望图像调整大小以适合div，并水平和垂直居中... 查看详情

让div中的内容水平和垂直居中

...居中使用margin:0pxauto;可以实现，但垂直居中使用外边距是无法达到效果的。（页面设置height:100%;是无效的），这里使用绝对定位+负外边距的方式来实现垂直居中，但同时要考虑页面重置大小的情况，需要使用js来修正。让一个DIV... 查看详情

CSS使div中的任何图像居中

】CSS使div中的任何图像居中【英文标题】：CSScenteranyimageindiv【发布时间】：2016-09-2522:02:12【问题描述】：假设我有div和width:300px和height:200px我希望div中的任何图像都水平和垂直居中，无论图像大于还是小于div；对于较小的图像mar... 查看详情