Html 将按钮和图标居中放置在不同的行上

作为一个小型

jQuery

项目的一部分，我正在尝试使用一个

Bootstrap glyphicon

图标和按钮居中，并且在它们之间有一个换行符。此时，glyphicon保持居中，但按钮会根据容器的大小向左/向右移动一点（最小时，它会显示为向左）

如何使这两个元素在其父元素的不同行上居中

下面的html显示了两个图标，但我使用jquery在单击正确的按钮后取消隐藏其中一个图标

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#问号{
字体大小：15px；
颜色：紫色；
底边：2件纯色紫色；
填充：0 10px 2px 10px；
}
.btn{
字体系列：日内瓦，“Helvetica Neue”，Helvetica，Arial，无衬线；
}
p{
字体系列：“Courier New”，Courier，“Lucida Sans打字机”，“Lucida打字机”，monospace；
}
瓦林先生{
线高：46px；
垂直对齐：中间对齐；
}
.图标ok标志{
字体大小：40px；
颜色：绿色；
}
.图标警告标志{
字体大小：40px；
颜色：红色；
}
.隐藏{
显示：无；
}
#显示句子{
显示：无；
}
.突出显示{
背景颜色：黄色；
}

你要什么？





波尔



“奥特拉！

对位

您可以通过将相对位置设置为父元素（在本例中为“文本中心”类的段落）来保持字形图标居中。此时，字形图标居中。希望这有助于回答您的问题

.glyphicon-ok-sign {
  position: absolute;
  font-size: 40px;
  color: green;
}

.glyphicon-warning-sign {
  position: absolute;
  font-size: 40px;
  color: red;
}

p.text-center {
    position: relative;
}

从隐藏按钮中删除“向右拉”类。这个班。如果我理解正确，这不适合您的任务

有一个问题是

元素之间出现了可用空间。您可以找到几种解决方案。但我建议将这些

转换为块。您可以删除

标记，添加图标和按钮，并为按钮定义一些上边距。之后，如果需要，可以删除父

块

我还从第一个图标和按钮中删除了

hide

类，以使结果可见：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
#重新加载btn{
边缘顶部：10px；
}
#问号{
字体大小：15px；
颜色：紫色；
底边：2件纯色紫色；
填充：0 10px 2px 10px；
}
.btn{
字体系列：日内瓦，“Helvetica Neue”，Helvetica，Arial，无衬线；
}
p{
字体系列：“Courier New”，Courier，“Lucida Sans打字机”，“Lucida打字机”，monospace；
}
瓦林先生{
线高：46px；
垂直对齐：中间；}
.图标ok标志{
字体大小：40px；
颜色：绿色；
}
.图标警告标志{
字体大小：40px；
颜色：红色；
}
.隐藏{
显示：无；
}
#显示句子{
显示：无；
}
.突出显示{
背景颜色：黄色；
}

你要什么？





波尔
“奥特拉！
对位