添加图像

<div class="card"> 
    <div class="item item-thumbnail-left thumb-centre thumb-right"> 

    <img src="img/carryout-icon.jpg"></img> 
    <img src="img/or.jpg"></img> 
    <img src="img/delivery-icon.jpg"></img> 

    </div> 
</div>

CSS：添加图像

.item.thumb-right img{ 
    position: absolute !important; 
    top: 10px !important; 
    right: 20px !important; 
    margin-right: 20px !important; 
    max-width: 80px !important; 
    max-height: 80px !important; 
    width: 100% !important; 
}

我怎么这么更新此为在中心图像

.item.thumb-centre img{ 
    position: center !important; 
    top: 10px !important; 
    max-width: 80px !important; 
    max-height: 80px !important; 
    width: 100% !important; 
}

演示：

http://play.ionic.io/app/91deb2272019

Edi t：中心图像的垂直对齐问题这就是它在控制台中的样子。

来源

2015-09-05 Simran Kaur

没有'position：center'，你有三张图片，你想要哪一张？你有没有尝试在父元素上的文本对齐：center？ –

在这里你去：http://play.ionic.io/app/23c0460f51dc
要对齐的任何元素向左或向右，你只需要float财产，并将其值设置为左或右。而为了集中化，你只需要margin: 0 auto加父母格与text-align:center。你的班会是这样
CSS：

.images-parent{ 
     text-align: center; 
    } 

    .left-image{ 
     float:left; 
     max-width: 80px !important; 
     max-height: 80px !important; 
    } 

    .center-image{ 
     margin:0 auto; 
     max-width: 80px !important; 
     max-height: 80px !important; 
    } 

    .right-image{ 
     float:right; 
     max-width: 80px !important; 
     max-height: 80px !important; 
    }

，简单地将它们分配给项目和图像标签这样
HTML：

<div class="item images-parent"> 
    <img src="img/carryout-icon.jpg" class="left-image"></img> 
    <img src="img/or.jpg" class="center-image"></img> 
    <img src="img/delivery-icon.jpg" class="right-image"></img> 
    </div>

来源

2015-09-05 08:58:26

这没有奏效。你能不能更新演示和seeif工程？ –

@SimranKaur你有三张图片？你想让他们都集中还是只有一个？ –

我只希望其中一个集中。一个向左，一个向右，一个居中。我的图像出现在给定的css的左右角落，但不在中央。我希望or.jpg居中。 –

你的CSS是不妥当的。使用余量：0自动;居中图像。
没有CSS属性像位置：中心

您正在寻找这样的事情

.item.thumb-right img{ 
    position: absolute !important; 
    top: 10px !important; 
    right: 20px !important; 

    max-width: 80px !important; 
    max-height: 80px !important; 
    width: 100% !important; 
} 

.item.thumb-centre img{ 
margin:0 auto; 
    top: 10px !important; 
    max-width: 80px !important; 
    max-height: 80px !important; 
    width: 100% !important; 
} 

.item.item-thumbnail-left{ 
    margin-left: 20px !important; 

}

来源

2015-09-05 07:46:33 Vishu238

但它没有奏效。你能否更新演示，看看是否有效？ –

把你的img标签内p标签。

<p style="text-align: center"> 
    <img src=....> 
</p>

我希望为你工作。

来源

2016-12-20 19:31:22

回答

相关问题