html - 如何对齐选项卡内的内容

Question

我在我的网站上使用语义标签和卡片。我在选项卡中有一张卡片列表。问题是我无法将这些卡片对齐到选项卡内的中心。我尝试了居中对齐但它不起作用。我不想要对齐文本居中，因为我不希望文本居中但内容居中，尽管对齐文本居中有效。这更像是一个设计问题，但仍然让我感到不安。

更新:

<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>

这是代码，但不仅仅是一张卡片。该选项卡充满了来自数据库的信息，也就是说，如果数据库中有 4 行，就会有 4 张卡片...我尝试了 margin-right 和离开了，它的工作原理是它只在标签的每一行中放一张卡片

Answer 1

类似于:

<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