0

我正在设计一个页面，该页面需要一个带有加号图像的水平条在中心。比如这个， 在此处输入图像描述

我试过这个，

<div><img src="http://s7.postimage.org/z6jiogw6f/add_icon.png" /></div>

div{
    background: #ced8e7;
    padding: 1px 0;
    position: relative;
    text-align: center;
    overflow-x: hidden;
}

但是条形图不是圆形的，而且图像完全在条形图内部。任何人都可以帮忙吗？示例，http://jsfiddle.net/PSAEJ/

4

3 回答 3

2

试试这个，它会工作测试：

更新： jsbin 演示

于 2012-12-24T09:04:20.200 回答
1

这应该对你有用：你只需要将你的 img 标签包装到另一个<div>

http://jsfiddle.net/ZkDXA/2

编辑：如果你不喜欢，你真的不需要额外div的。另一个例子http://jsfiddle.net/ESt84/

于 2012-12-24T09:10:06.737 回答
1

将溢出属性设置为可见或删除（默认overflow: visible）并为您的图像提供 -ve 边距

div {
    background: #ced8e7;
    padding: 1px 0;
    position: relative;
    text-align: center;
    height: 7px;
    margin-top: 5px; }

img {
    margin-top: -7px; }

更新了 jsfiddle：http: //jsfiddle.net/PSAEJ/10/

于 2012-12-24T09:40:52.183 回答