Jquery UI选项卡 - 将整个Div /容器居中
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Jquery UI选项卡 - 将整个Div /容器居中相关的知识，希望对你有一定的参考价值。
我正在使用Jquery UI Tabs（https://jqueryui.com/tabs/#vertical）。我希望整个容器位于页面的中心。我不是指打开的标签或可点击的标签文本的内容。我的意思是最里面的容器，里面有一切。
Google上有很多例子来对齐标签或内容，但我找不到任何关于如何对齐主div的内容。
到目前为止，这是我尝试过的：
div.otabs {
align-content:center;
width:300px;
height:300px;
border:1px solid #555;
position:absolute;
align-items:center;
justify-content:center;
top:10px;
left:10px;
}
我在实际的选项卡div上尝试了这个代码，并在tabs div之外添加了我自己的div，但是tabs容器保持左对齐。谁能提出建议？
<div id="otabs" class="otabs">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><asp:LinkButton runat="server" href="#tabs-2">Proin dolor </asp:LinkButton></li>
</ul>
<div id="tabs-1">
<h2>Content heading 1</h2>
<p>Proin elit arcutempus, commodo a, risus. Curabitur nec arcu. Donec tempus lectus.</p>
</div>
<div id="tabs-2">
<h2>Content heading 2</h2>
<p>Morbi tincidunt, dui sit amet facilisis . Suspendisse sed ligula in ligula suscipit aliquam. Praesent in .</p>
</div>
</div>
</div>
答案
因为，你已经在容器上使用了position:absolute。您只需要这3行代码就可以使容器垂直和水平居中:(这使您无需更改显示或任何其他CSS属性，如果不需要）
transform:translate(-50%,-50%);
left:50%;
top:50%;
body{
}
div.otabs {
align-content: center;
width: 300px;
height: 300px;
border: 1px solid #555;
position: absolute;
align-items: center;
justify-content: center;
transform:translate(-50%,-50%);
left:50%;
top:50%;
}<div id="otabs" class="otabs">
<div id="tabs">
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li>
<asp:LinkButton runat="server" href="#tabs-2">Proin dolor </asp:LinkButton>
</li>
</ul>
<div id="tabs-1">
<h2>Content heading 1</h2>
<p>Proin elit arcutempus, commodo a, risus. Curabitur nec arcu. Donec tempus lectus.</p>
</div>
<div id="tabs-2">
<h2>Content heading 2</h2>
<p>Morbi tincidunt, dui sit amet facilisis . Suspendisse sed ligula in ligula suscipit aliquam. Praesent in .</p>
</div>
</div>
</div>另一答案
删除position:absolute，然后添加display: block;和margin: auto。
CSS Margin auto将使浏览器计算它（所有边距都相同）。
div.otabs {
display: block;
margin: auto;
align-content:center;
width:300px;
height:300px;
border:1px solid #555;
align-items:center;
justify-content:center;
top:10px;
left:10px;
}
以上是关于Jquery UI选项卡 - 将整个Div /容器居中的主要内容，如果未能解决你的问题，请参考以下文章
jQuery UI 图标。 .ui-state-hover .ui-icon 被浏览器忽略