将文本右对齐并对齐图标

Question

如上图所示，我想将圆圈中的文字右对齐，我也试图证明 font awesome 图标的合理性，但它不起作用。有人能帮我吗？或者给我一些如何做的想法。

这是我的 html 代码。

             <nav class="navbar navbar-default navbar-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav-collapse">
                <span class="icon-bar" ></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>  
            </button>
            <img class="img-responsive" src="images/brandz.png" >
        </div>

    <div class="collapse navbar-collapse" id="nav-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Students</a></li>
            <li><a href="#">Faculty</a></li>
            <li><a href="#">About us</a></li>
            <li><a href="#">Contact us</a></li>

        </ul>

        <ul class="nav navbar-nav navbar-right">
                    <li><a data-toggle="modal" href="#myModal" ><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
                    <!-- Modal -->
                        <div id="myModal" class="modal fade" role="dialog">
                            <div class="modal-dialog">
                    <!-- Modal content-->
                             <div class="modal-content">
                                 <div class="modal-header">
                                     <button type="button" class="close" data-dismiss="modal">&times;</button>
                                 </div>
                                 <div class="modal-body">
                                    <p>Some text in the modal.</p>
                                 </div>
                                 <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                 </div>
                             </div>
                            </div>
                       </div>
        </ul>
    </div>
</div>
</nav>

<footer class="text-center">
    <div class="footer-above">
        <div class="container">
            <div class="row">
                <div class="footer-col col-md-4">
                    <h4>GAPC MISSION & VISION</h4>
                    <h4>Mission</h4>
                    <p>To provide affordable learning with emphasis on relevant, innovative and quality academic programs and services.</p>
                    <br>
                    <h4>Vision</h4>
                    <p>A model learning institution that makes a positive difference and is responsive to the needs of the global community.</p>
                </div>

                <div class="footer-col col-md-4">
                    <h4>CORE VALUES</h4>
                    <h4>G - God Fearing</h4>
                    <h4>A - Achiever</h4>
                    <h4>P - Purpose Driven</h4>
                    <h4>C - Committed Leadership</h4>
                </div>

                <div class ="footer-col col-md-4">
                    <h4>GAPC SUPPORT</h4>
                    <h4 class ="fa fa-map-marker">Address</h4>
                    <p>1045 M. Naval St., San Jose, Navotas City</p>
                    <h4 class ="fa fa-phone">Tel No.</h4>
                    <p>282-9035 / 282-9036 / 282-2940</p>
                </div>

            </div>
        </div>
    </div>
    <div class="footer-below">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                      Copyright &copy 2016. Governor Andres Pascual College. All Rights Reserved
                </div>
            </div>
        </div>
    </div>
</footer>

这是我的 css

.navbar-default .navbar-nav > li > a {
 font-weight: 590;
 color: #949494;
 display: block;
 padding: 5px 35px 2px 45px;
 border-bottom: 3px solid transparent;
 line-height: 97px;
 text-decoration: none;
 transition: border-bottom-color 0.5s ease-in-out;
 -webkit-transition: border-bottom-color 0.5s ease-in-out; 
 }
 .navbar-default{
 background-color:#fff;

 }
 .nav>li>a {
 position: relative;
 }
.navbar-default .navbar-right > li > a {
 padding-left: 70px;
 padding-right: 1px;
 }
.navbar-default .navbar-toggle .icon-bar {
 background-color: #000000;
 margin:0 0 4px;
 width: 25px;
 height: 5px;

}
@media (max-width: 768px) {
.img-responsive{
    width: 300px;
    height:50px;
    padding-left:50px;
}
}
@media (max-width: 376px) {
.img-responsive{
    width: 220px;
    height:50px;
    padding-left: 20px;
}
}
@media (max-width: 286px) {
.img-responsive{
    width: 180px;
    height:50px;
    padding-left: 5px;
 }
}
 .nav.navbar-nav > li{
 display: :inline-block;
 }
 .nav.navbar-nav{
 list-style-type:none;
 }
 .nav.navbar-nav > li > a:hover{
    color:#a92419;
   border-bottom-color: #a92419;
  }

  .navbar-default .navbar-toggle .icon-bar {
  background-color:#a92419 ;
  margin:0 0 4px;
  width: 25px;
  height: 5px;

  }
  .navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover        {
  background: none;
  }
  button.navbar-toggle{
  background:none;
  border:none;
  color:#000;

}


footer {
color:#fff;
position:absolute;
bottom:0;
width:100%;
height:10px


 }
 footer h4,p {
 margin-bottom: 20px;
 font-family: Oswald;
 text-align:justify;

 }

footer .footer-above {
padding-top: 80px;
background-color: #a92419 ;
}

footer .footer-col {
margin-bottom: 50px;
margin-right: 100px;

}

footer .footer-below {
padding: 25px 0;
background-color: #fff;
color:#949494;;

}

Answer 1

您需要在 CSS 中使用 Float:right 代码行来管理该文本块。请参阅 here for it's definition and here 以了解它的实际应用示例以及它是如何在代码中实现的。希望这对您有所帮助！

Answer 2

您需要在 "footer .footer-col"

上将边距更改为填充

footer .footer-col {
margin-bottom: 50px;
padding-right: 100px;
}

此外，您需要将 FontAwesome 类转移到 h4 之外的其他内容上，也许像这里这样的 i：

https://jsfiddle.net/e16vwtw9/1/

将文本右对齐并对齐图标

Aligning text to right and justify the icon

html

css

fontawesome-4.4.0