jQuery Mobile：试图让一个图标显示在一些文本的中间答案

【问题标题】：jQuery Mobile: Trying to get an icon to display in the middle of some textjQuery Mobile：试图让一个图标显示在一些文本的中间
【发布时间】：2014-04-09 04:28:37
【问题描述】：

我试图让图标显示在“一些文本”的中间。

谁能给点建议？

http://jsfiddle.net/LZxxB/50/

<div>
    <div style="display:inline-block;">some</div>
<span class='ui-btn-icon-notext ui-icon-arrow-u-l' style="display:inline-block;"></span>

    <div style="display:inline-block;">text</div>
</div>

【问题讨论】：

我看到了你的css，你能试着去掉top和left 50%吗？
这似乎可以解决问题，但由于我无法控制框架的 css，如何内联覆盖它？
是的，我认为内联覆盖它可以解决问题，如果你可以尝试的话。

标签： javascript jquery css jquery-mobile

【解决方案1】：

这是一种方法。您基本上制作了一个不是按钮的图标按钮。

HTML：

<div>
    <div style="display:inline-block;">some</div>
    <span class="ui-nodisc-icon ui-alt-icon nonbuttonicon" >
        <span class="ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-inline"></span>
    </span>
    <div style="display:inline-block;">text</div>
</div>

CSS：

.nonbuttonicon .ui-btn {
    background: transparent;
    cursor: default;
    border: 0;
    margin: 0;
}
.nonbuttonicon .ui-btn:hover{
    background: inherit;
}

DEMO

更新：

这是一种不使用 jQM 按钮和单个 span 的方法：

<div>
    <div style="display:inline-block;">some</div>   
    <span class="ui-alt-icon ui-icon-delete ui-btn-icon-notext inlineIcon"></span>    
    <div style="display:inline-block;">text</div>
</div>

.inlineIcon  {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.inlineIcon:after{
    background-color: transparent;
}

更新DEMO

如果你喜欢圆盘顶部的白色图标，CSS 会变得更简单：

<span class="ui-icon-delete ui-btn-icon-notext inlineIcon"></span>

.inlineIcon  {
    display: inline-block;
    position: relative;
    vertical-align: middle;
}

DEMO

【讨论】：

不错！但我想避免解决它作为一个按钮所需的额外标记/css
没问题，使用单个 SPAN 而没有 btn CSS 查看我的更新答案
不错！如果你想要一个白色图标，只需从 span 中删除 ui-alt-icon。

【解决方案2】：

这些代码行将重置以不同方式显示的 jquery mobile css。您可能需要稍微调整一下以满足您的需求。

div span.ui-icon-arrow-u-l:after {position:relative;}
div span.ui-icon-arrow-u-l {display:inline-block;height:30px;margin-top:0;width:16px;}

希望这会有所帮助。

【讨论】：

接近。 6px 需要硬编码吗？如果我将字体大小设置为超过 1em 会怎样。它会破坏它吗？