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张卡片......我尝试了右边缘和左边和它工作只在标签的每一行放一张卡

Answer 1

我不知道什么是卡片，但我认为这就像div标签等。

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

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

如果没有变化，

添加'display：block'以及此内容。

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

Answer 2

这可能会解决您的问题

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

或使用

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

Answer 3

类似的东西：

<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

如何对齐选项卡内的内容

3 个答案: