Question

如何设置我的播放按钮/ img的样式，使其在文章标签的中心水平对齐？我希望按钮/ img保持在面板的中心，因为响应面板的宽度会随着浏览器窗口宽度的变化而变化。

html / js：

            jQuery('<img/>', {
                src: '/img/youtubeIcon.png',
                class: 'youtubeIcon'
            }).appendTo('#article'+i)

            jQuery('<button/>', {
                id: 'playBtn'+i,
                class: 'playBtn'
            }).appendTo('#article'+i)

            jQuery('<img/>', {
                src: '/img/playIcon.png'
            }).appendTo('#playBtn'+i)

的CSS：

.playBtn {
    top: 25;
    position: relative;
    background-color: transparent;
    border: none;
    vertical-align: middle;
}
.playBtn img{
    width: 50;
}

https://github.com/leptone/panels/blob/master/public/index.html#L53

Answer 1

如果你想水平对齐它，你可以简单地得到父元素，并在其CSS中放入 text-align：center; 。

还有一个完整的指南，我发现它对任何类型的对齐here都很有用。

Answer 2

Internet Explorer不支持在SELECT列表中的OPTION元素上使用'display：none'样式。

例如，以下内容适用于FireFox和Google Chrome，但不适用于Internet Explorer。

<select>
<option value=“volvo”>Volvo</option>
<option style=”display: none” value=“saab”>Saab</option>
<option value=“mercedes”>Mercedes</option>
<option value=“audi”>Audi</option>
</select>

由于Internet Explore不会隐藏选项，因此您需要禁用它。在Internet Explorer中，这将为浅灰色选项着色，不允许选择它。

以下jQuery适用于Internet Explorer，Firefox和Goolge Chrome（以及其他浏览器）。它将隐藏和禁用该选项：

$('select option[value=saab]').attr('disabled', 'disabled').hide();
Note – replace $ with jQuery if you are using WordPress.

jQuery-HideSelectOption1

如果您还没有在页面上加载jQuery，则需要包含它。最简单的方法是在页眉中包含以下行。

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
To display or enable the option again, using the following jQuery:

$('select option[value=saab]').removeAttr('disabled').show()
jQuery-HideSelectOption2

在文章中心垂直对齐img /按钮（父标记）

2 个答案: