Question

我正在尝试选择glyphicon并使其居中。在span元素中设置glyphicon样式的正确选择器是什么？

<section id="intro" class="intro-section">
    <div class="container">
      <div class = "row">
            <div class="col-md-12">
                <div class = "well">
                    <h1</h1>
                </div>
             <a class="btn btn-primary btn-lg page-scroll" href="#employment" id="arrow"><span class = "glyphicon glyphicon-chevron-down"></span></a>
            </div>
      </div>
    </div>
</section>


#arrow {
    text-align: center;
}

Answer 1

您可以将text-align：center添加到链接/ glyphicon的父级：

.row .col-md-12 {
      text-align:center;
}

<强> bootply example

Answer 2

如果您尝试仅使用Glyphicon处理标记，只需为标记指定ID并选择该方式。

<span id="myStyledGlyph" class = "glyphicon glyphicon-chevron-down"></span>

这是你想要完成的吗？

Glyphicon上的对齐将很困难，因为它位于标签中且已经在

中

您可以尝试将整个标记包装在标记中，并为此分配ID：

<div id="alignThisDiv"><a class="btn btn-primary btn-lg page-scroll" href="#employment" id="arrow"><span class = "glyphicon glyphicon-chevron-down"></span></a></div>

Answer 3

因为id是唯一的，您可以使用id选择器。检查DOM以查看是否有多个元素包含id #arrow，如果有，则更改它们。原因id应该是独一无二的。

Answer 4

在您的情况下，您还需要vertical-align: middle：

#arrow {
    text-align: center;
}
#arrow > .glyphicon {
    vertical-align: middle;
}

Answer 5

如果span包含文字，并且您希望将其作为中心对齐，则text-align: center将起作用。至于我从你的问题中得到的结果是，span有一个班级glyphicon会有一些图片/图标作为背景，你想将span对齐为中心。

请尝试以下操作，看看这是否对您有所帮助 -

#arrow .glyphicon{
    width: 50%;
    margin: 0 auto;
}

CSS Selector无法找到ID

5 个答案: