带有填充的边框垂直或水平中心上的图像

Posted 2023-03-05

【中文标题】带有填充的边框垂直或水平中心上的图像

【英文标题】：Image on vertical or horizontal center of border with padding

【发布时间】：2014-05-03 23:13:19

【问题描述】：

我有一个边框，它适合容器 div 的 100% 宽度。我想要做的 - 在该边框的中心添加背景（或 img 标签），例如：

http://www.part.lt/img/8a22897d62de874896a3b62107032bd3507.gif

（“+”是图像，左右的线必须是边框）。空白必须是边框的填充或边距。

我该怎么做？

我尝试过的：

JSFiddle

<div class="full-border">
   <div class="full-border-cross"></div>
</div>


.full-border 
     border-bottom: 1px solid rgb(204,204,204);
     padding: 13px 0; 
     position: relative;


.full-border-cross 
     background: #fff url(http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png) no-repeat center center;
     position: absolute; 
     width: 100%; 
     height: 100%; padding: 0 13px;

【问题讨论】：

向我们展示您的尝试。

我不知道，我能做什么......

SO 是为了帮助你，而不是为你做某事。显示一些代码，尽可能地满足您的需求，您可以创建。你也可以试试背景，也许是 bg 图片。

jsfiddle.net/WHVbc - 有一些东西，我正在尝试，但这只是主要工作。

编辑您的问题并将其添加到那里（作为代码）。

【参考方案1】：

我在下面更新了您的要求，也可以在下面的小提琴中找到。参考...

这里：http://jsfiddle.net/wRa8n/

<div class="full-border"></div>
<div class="full-border-cross"></div>
<div class="full-border"></div>

.full-border 
    border-bottom: 1px solid #CCCCCC;
    display: inline-block;
    margin: 0 16px;
    padding: 0;
    width: 200px;


.full-border-cross 
    background: url("http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: inline-block;
    height: auto;
    padding-top: 13px;
    width: 15px;

【参考方案2】：

空白是否“必须”填充？或者你可以给它指定一个宽度吗？

我已经用这段代码更新了你的小提琴：

.full-border-cross 
     background: url(http://www.part.lt/img/21ea608f463d841dd48f2a856ef7d0d4993.png) no-repeat center center #fff;
     position: absolute; 
     left: 50%;
     width: 40px; 
     height: 100%;

这里：http://jsfiddle.net/WHVbc/17/