Question

我正在使用Ionic开发一个小型移动应用程序，并且正在努力显示内嵌文本的图像。

            <ion-view title="Beer">
                <ion-content class="has-header">
                    <div class="row">
                        <div class="col text-center">
                                <h2>Brooklyn</h2>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col col-40">
                                <p style="text-align: right;"><b>Country:</b></p>
                        </div>
                        <div class="col" >
                                <p style="text-align: left;"><img ng-src="img/flags-mini/us.png" /> United States</p>
                        </div>
                    </div>
                </ion-content>
            </ion-view>

由于我对CSS非常缺乏经验，因此我很难显示美国国旗并且拥有＆lt; p>内容垂直集中。它现在的方式是显示在行的底部而不是中心：

我尝试了不同的东西：调整＆lt; div＆gt;用于定义内联css样式以尝试将文本向上移动一点，将标志移动到单独的col，定义边距等。没有任何效果。

有谁知道如何让它们对齐？

Answer 1

以下是一种如何做到这一点的方法：

<ion-view title="Beer">
    <ion-content class="has-header">
        <div class="row">
            <div class="col text-center">
                    <h2>Brooklyn</h2>
            </div>
        </div>
        <div class="row">
            <div class="col col-40">
                    <p style="text-align: right;"><b>Country:</b></p>
            </div>
            <div class="col" >
                    <img ng-src="img/flags-mini/us.png" style="float:left; margin-right: 5px;"/>
                    <p style="text-align: left;"> United States</p>
            </div>
        </div>
    </ion-content>
</ion-view>

那么，我做了什么？我从img标记中取出p标记，并将float:left; margin-right: 5px; CSS规则添加到此图像中。休息完好无损。

您可以看到在Codepen上运行的示例：http://codepen.io/anon/pen/JGwNqM

使用Ionic显示内嵌图像

1 个答案: