Question

我试图集中一些文字，但此刻正在挣扎。这就是我的文本目前的格式：

<div class="panel panel-default" ng-repeat="criteria in controller.productCriteria">
    <div class="panel-heading">
        <div class="row flex">
            <div class="col-xs-3 flex flex-column flex-center"><strong>{{ criteria.name }}</strong></div>
            <div class="col-xs-9 text-center">
                <div class="row">               
                    <div class="col-xs-3" ng-repeat="attribute in criteria.attributes">
                        <div class="option" ng-class="{ 'active': attribute.active }">
                            <div class="point"></div>
                            <span class="small">{{ attribute.name }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

你可以在这里看到它的实际情况：

https://codepen.io/r3plica/pen/QgmVmp

如果您看到， Midweight 项目实际上大于其内容，因此它无法正确居中。我从这里使用了一个解决方案：

Center Text Larger than Container? (Without using separate child element)

解决这种情况，虽然它确实使文本正确居中，但它增加了列的大小，这意味着它们被包裹到一个新行上，这不是我想要的。你可以在这里看到发生的事情：

https://codepen.io/r3plica/pen/pwLOKW

那么，任何人都可以帮助我吗？

Answer 1

您可以尝试使用flex属性：

修改codepen forked

的示例

  .option {
    color: $silver;
    display: flex;
    flex-flow: column;
    align-items:center;
    box-shadow:0 0 0 1px;/* see me , remove me */

中心文本即使大于容器

1 个答案: