如何將 Font Awesome 圖標右對齊？

Question

我正在嘗試text-align: right在我的 CSS 中，但 text-align 出於某種原因沒有移動它。 我希望網站標題左對齊，圖標右對齊在同一行。 這就是我正在嘗試的。

JS小提琴

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="top-container">
    <h2>Website Title</h2>

    <i class="fas fa-bars"></i>
</div>

CSS

body {
  margin: 0;
}

.top-container {
    padding: 20px;
    margin: 0;
    width: 100%;
    color: rgb(255, 255, 255);
    background-color: rgba(0, 0, 0, 0.75);
    font-size: 2em;
    font-weight: bold;
}

.top-container i {
    color: red;
    display: inline-block;
    text-align: right;
}

.top-container h2 {
    display: inline-block;
}

h2 {
  margin-top: 10px;
}

Answer 1

text-align將調整您正在將其分配給該元素，這並不在做任何事情中的文本inline-block這樣的元素（因為這是一樣寬的內容）。 使用float: right; 而不是text-align: right

https://jsfiddle.net/s4a9sct9/1/

Answer 2

 * { padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .top-container { position: relative; background: #eaeaea; width: 100%; padding: 30px; } .top-container.float-style>h2 { display: inline; } .top-container.float-style>i { float: right; line-height:26px; } .top-container.absolute-style > i { position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <div class="top-container float-style"> <h2>Website Title float style</h2> <i class="fas fa-bars"></i> </div> <hr style="margin:30px 0px;"> <div class="top-container absolute-style"> <h2>Website Title absolute</h2> <i class="fas fa-bars"></i> </div> 

Answer 3

為元素創建自定義Id --> <i class="fal fa-phone" id="customfa"></i>
前往你的 CSS 文件並修改這些 -->

#customfa{right: 10%;} 你可以使用 right, left , top 和 bottom 屬性。

Answer 4

（心）圖標對齊圖像

style="
       color:red; 
       margin: auto; 
       position: absolute;
       display: inline;
       right: 20px;
       text-align: right;
       top: 23px;
       width: 300px;"

Answer 5

必須更改顯示以應用 text-align

  .myClass {
      display: block;
      text-align: right;
    }

Answer 6

如果text-align: right不起作用，請嘗試float: right 。