Question

我正在尝试添加一个并排显示4个材料设计卡的功能。它在除safari / ios之外的所有其他浏览器上都能正常工作。标记如下。

     <div layout="row" layout-sm="column" layout-xs="column" layout-align="space-around start" layout-align-sm="center stretch" layout-align-xs="center stretch" >

    <div flex="grow" flex-sm="grow" flex-xs="grow" layout="row" layout-xs="row" layout-align="space-around start" layout-align-xs="center stretch">
        <md-card flex="grow" layout="row" layout-align="center center" flex-gt-sm="50"  class="selling-points-card"  >
            <div  class="selling-points-picture" >
                <img src="http://placehold.it/50x50">
            <span  class="selling-points-text">Free Service Included</span>        
            </div>
        </md-card>

        <md-card flex="grow" layout="row" layout-align="center center" flex-gt-sm="50"  class="selling-points-card"  >
            <div  class="selling-points-picture" >
                <img src="http://placehold.it/50x50">
            <span  class="selling-points-text">30 Day Money back guarentee</span>        
            </div>
        </md-card>
    </div>

    <div flex="grow" flex-sm="grow" flex-xs="grow" layout="row" layout-xs="row" layout-align="space-around start" layout-align-xs="center stretch">
        <md-card flex="grow" layout="row" layout-align="center center" flex-gt-sm="50"  class="selling-points-card"  >
            <div  class="selling-points-picture" >
                <img src="http://placehold.it/50x50">
            <span  class="selling-points-text">90 Day Warranty</span>        
            </div>
        </md-card>
        <md-card flex="grow" layout="row" layout-align="center center" flex-gt-sm="50"  class="selling-points-card"  >
            <div  class="selling-points-picture" >
                <img src="http://placehold.it/50x50">
            <span  class="selling-points-text">FreedomPop Certified</span>        
            </div>
        </md-card>
    </div>

    </div>
**css rules**
.selling-points-card{
position:relative; 
display:inline-block;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
.selling-points-picture {
    display:inline-block; 
    padding:5px;
};
.selling-points-text{
    position:absolute; 
    top:40%; left:30%; 
    font-weight:500; 
    font-size:12px; 
    letter-spacing: 0.020em;
};

}

这就是大多数浏览器的样子。 https://i.imgur.com/JFWBb5T.png

然而，在iPhone模拟器上，这4张卡被搜索结果切断了。 https://i.imgur.com/dYyCVGa.png

有谁知道我可能会缺少什么？另一个问题是......是否有正确的方法来格式化跨度文本，使其位于其父卡的中间？

Answer 1

对于您的主要问题，您是否尝试过使用flex属性的其他值？

要将文本居中放置在父元素中，请使用Angular Material的layout="row"和layout-align="center center"属性。（您可能必须使用块元素才能使其工作）

Angular Materials Flex-box在iOS Safari上无法正常显示

1 个答案: