Question

如何将图标与右角位置对齐。

但它也需要做出回应。

我尝试在离子中使用标题，但右对齐无法正常工作。

<div class="bar bar-header" style="background-color:silver;">
  <span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
  <span class="title margin-align">
    <img src="logo.img" style="width:45px;height:45px;"></img>
  </span>
  <i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>  
</div>

Answer 1

在右上角位置，您的意思是您希望它位于标题栏右上角吗？

如果是这样，h1 div之后的任何按钮/标签都会放在右侧。

<div class="bar bar-header">
  <button class="button icon ion-navicon"></button>
  <h1 class="title">Header Buttons</h1>
  <button class="button">Edit</button>
</div>

如果没有，你能提供一个codepen，我可以看看吗？

Answer 2

您可以在图片范围内使用position: absolute进行尝试。像这样：

<div class="bar bar-header" style="background-color:silver; position:relative">
  <span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
  <span class="title margin-align" style="position:absolute; right: 10px; top: 5px;">
    <img src="logo.img" style="width:45px;height:45px;"></img>
  </span>
  <i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>  
</div>

您还可以使用float: right：

<div class="bar bar-header" style="background-color:silver;">
  <span class="text-centre" style="color:white; position:relative; top:2px;">Hello,<b>UserName</b></span>
  <span class="title margin-align" style="float:right">
    <img src="logo.img" style="width:45px;height:45px;"></img>
  </span>
  <i class="ion-android-notifications" style="font-size:23px; padding: 1px 12px 0 480px;"></i>  
</div>

我想这可能会解决您的图像与响应式设计正确对齐的问题。

我如何在离子框架中对齐图标的位置，它也需要响应

2 个答案: