Jquery 在语义用户界面中居中搜索框

我正在尝试在语义ui中居中搜索框。该条居中，但搜索结果没有居中。我尝试将居中对齐的类与div输入对齐，但不起作用 这是我的代码和我的js：

var类别内容=[{
类别：'语言'，
标题：“Python”
},
{
类别：'语言'，
标题：“Java”
},
];
$（'.ui.search'）
.搜索({
类型：'类别'，
资料来源：类别内容
});
正文{
背景色：#F2EDF3；
}
.搜索栏{
宽度：50%；
}
您的问题是，因为显示结果的元素具有绝对定位的css属性。此组合，加上左：0，将始终将元素放置在左侧

重置后（通过将其设置为继承），并将内容与边距居中：0自动；一切按计划进行

如果不起作用，请使用更具识别性的CSS，它将覆盖任何其他样式。但是请注意，如果html与呈现的内容或css有任何不同，那么这将不起作用。这取决于“击败”现有规则，该规则通过从同一父级开始，然后更具体地对其进行绝对定位（使用.visible表示附加类）

如果不起作用&作为最后的选择，使用！重要的是，这通常不被认为是一个好的实践（因为它破坏了CSS规则的正常流程，并且在将来进行样式设计时可能会导致问题），但是如果您找不到合适的标识符，这可能会起作用

.results.visible{
   margin: 0 auto !important;
   position: inherit !important;
}

你可以用这个试试。结果有position:absolute和left:0，它的父项有position relative，它是100%，所以这是正常的。结果会转到左侧，因为position relative内部是这样工作的

因此，正如您对任何框架所做的那样，您必须覆盖内容。不要使用！重要的是，这是一种不好的做法，您使用的是css中的名称“”

所以你可以这样做：

.ui.search > .search-bar + .results {
  position: relative;
  margin: 0 auto;
}

请尝试下面的代码。我已经检查过了，应该可以用了

.ui.category.search .results.visible {
    display: inline-block !important;
    width: 50% !important;
    position: unset !important;
}

输出：

这可能会帮助您：.results.transition.visible{margin:auto；position:relative；}@VishnuChauhan您检查过它的外观了吗？：D它出现在左边，然后移动到centerok我让它工作了，但是你能解释一下你是如何找到解决方案的吗，因为我在docs@anekix通过使用开发人员工具检查元素，我发现了导致显示问题的原因，并使用所需的css进行了纠正。我不熟悉语义学，但据我所知，文档也没有提供关于居中的解决方案。@vfle dude你真的偷走了我的答案，投了反对票。尊重别人的意见answers@Raul该网站的目的是尽可能提供最佳答案。已经有一个与您的答案太相似（提前40分钟左右）的现有答案，您选择再次回答，而不是对现有答案进行编辑，并进行一些小的改进。我在你之前就回答了，我不会再费心回答了，因为这个网站的目的是提供最好的答案，而不是试图最大化你的业力收益。祝你有愉快的一天。@vfe如果你提到你的答案是用我的答案改进的，我会很好。这就是我要问的。如果你不否决我的答案，我将不胜感激，因为它被@vfle偷走了。他编辑了他的答案，并将我的解决方案复制到他的报告中。谢谢
.ui.search > .search-bar + .results {
  position: relative;
  margin: 0 auto;
}

.ui.category.search .results.visible {
    display: inline-block !important;
    width: 50% !important;
    position: unset !important;
}