我正在尝试将搜索框置于语义用户界面的中心。条形图居中，但搜索结果没有居中。我尝试将 居中对齐 类设置为输入 div，但没有成功 这是我的代码和我的 js fiddle link :
var categoryContent = [{
category: 'Language',
title: 'Python'
},
{
category: 'Language',
title: 'Java'
},
];
$('.ui.search')
.search({
type: 'category',
source: categoryContent
});body {
background-color: #F2EDF3;
}
.search-bar {
width: 50%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
</head>
<body>
<div class="ui grid center aligned">
<div class="sixteen wide column">
<div class="ui category search ">
<div class="ui icon input search-bar">
<input class="prompt" type="text" placeholder="looking for...">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</div>
</div>
</body>
</html>最佳答案
您的问题是，因为显示结果的元素具有绝对定位的 css 属性。这与 left:0 组合，将始终将元素放在左侧。
重置后(通过将其设置为继承)，并使内容居中并带有 margin: 0 auto;所有工作都按预期进行。 Here is an example fiddle
.results.visible{
margin: 0 auto;
position: inherit;
}
如果它不起作用，请使用更具识别性的 CSS，这将覆盖任何其他样式。但请注意，如果 html 与呈现的内容或 css 有任何不同，这将不起作用。这取决于“击败”现有规则，该规则通过从同一个父级开始然后对其进行更具体的强制绝对定位(使用 .visible 指代其他类)。
.ui.search > .results.visible {
position: relative;
margin: 0 auto;
}
万一不起作用，作为最后的选择，使用 !important，这通常被认为不是一个好的做法(因为它打破了 CSS 规则的正常流程，并且可能在未来的样式设计中引起问题)，但以防万一你找不到合适的标识符，这可能会起作用。
.results.visible{
margin: 0 auto !important;
position: inherit !important;
}
你可以试试这个 fiddle
关于jquery - 在语义 ui 中将搜索框居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52151487/