如何对齐选项卡内的内容

我在我的网站上使用了语义选项卡和卡片。我有一个选项卡内的卡片列表。问题是我无法将这些卡对齐到标签内部。我尝试对齐中心，它不工作。我不想对齐文本中心，因为我不希望文本在中心，但内容，虽然对齐文本中心的作品。这更多的是一个设计问题，但仍然在我的紧张之中。如何对齐选项卡内的内容

UPDATE：

<div class="container" style="align:center;padding-top:5%; padding-left:1%;padding-right:1%;padding-bottom:2%"> 
    <div class="ui top attached tabular menu" > 
     <a class="active item" data-tab="first"> 
      <b><p style="font-size:120%">first</p></b> 
     </a> 
    </div> 
    <div class="ui bottom attached active tab segment" data-tab="first" style="align:center;padding-top:2%;"> 
     <div class="container"> 
      <div class="ui cards"> 
       <div class="card"> 
        <div class="image"> 
         <img class="ui medium image" height="50%" width="70%" src="/image6.jpg"> 
        </div> 
        <div class="content"> 
         <div class="header"></div> 
         <div class="description"></div> 
        </div> 
        <div class="extra content"> 
         <a class="right floated created"> 
          <div data-toggle="modal" data-target="#myModal"></div> 
          <div data-toggle="button">          
           <a class="friends"> 
            <i class="user icon"></i>... 
           </a> 
          </div>  
         </div> 
        </div> 
       </div>  
      </div> 
     </div> 
    </div>

这是代码，只是不只是一个card.the片充满了来自数据库的信息，那就是如果有4行的数据库上会有4张牌...我尝试了保证金 - 右侧和左侧，它的工作，只有在标签的每一行中放置一张卡片

来源

2015-05-21 Mar10Bel

您需要发布一些HTML和CSS ... –

'margin-left：auto; margin-right：auto; text-align：center;'应该以任何内容为中心 – odedta

你可以发布一些示例代码或类似plunkr的东西来展示这个问题吗？ –

我不知道什么是卡片，但我认为这是类似div标签的东西..

div可以在保证金的帮助下对齐中心。

margin-left:auto; 
margin-right:auto;

如果没有变化，

添加 '显示：块' 与此相伴。

但如果您使用'float'或'display：inline-block'css属性具有相同的div，它将不起作用。

来源

2015-05-21 11:03:02

这可能会解决你的问题

margin-right: auto; 
margin-left: auto; 
width: 50%;

或使用

margin-right: auto; 
margin-left: auto; 
text-align: center;

来源

2015-05-21 11:04:12

喜欢的东西：

<div class="tab"> 
<p>This is text.</p> 
<p>This is text.</p> 
<span>This is content</span> 
<p>This is text.</p> 
</div> 

.tab { 
width:300px; 
} 
.tab span { 
width:100px; 
position:absolute; 
left:50%; 
margin-left:-50px 
/*50% of width*/ 
}

JSFiddle

来源

2015-05-21 11:06:15 freewheeler

如何对齐选项卡内的内容

回答

相关问题