首页 文章

使用Ionic显示内嵌图像

提问于
浏览 次
1

我正在使用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非常缺乏经验，所以我很难显示美国国旗并且<p>内容垂直集中 . 现在的方式是文本显示在行的底部而不是中心：

enter image description here

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

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

html css cordova ionic-framework

1 回答

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

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

    你可以在Codepen上看到这个例子：http://codepen.io/anon/pen/JGwNqM

    回复于

相关问题