イメージとテキストの両方を同じ形で中央に保存する解決策が必要です

Question

イメージとテキストは中央にある必要があります。テキストは中央に移動しますが、イメージはテキストの上部に表示されます。同じ方法でテキストと画像が必要ですが、中心にしかありません。おかげ以下は事前に

は私のコードです：

<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 

 

 
    <div class='col-md-12-fluid' style=" 
 
    \t 
 
     padding-bottom: 2px; 
 
     background-color:#7E8F7C; 
 
     
 
     "> 
 
     <div class "row" style="background-color:red !important"> 
 
     <div class='col-md-8-fluid'> 
 
      <!--recently search was here--> 
 
      <a class="navbar-brand" href="index.html"></a> 
 
     </div> 
 
     <div class='col-md-4-fluid' style="background-color:#3B3738; height:25px;"> 
 
      <h3>Nepal Safety</h3> 
 
     </div> 
 
     </div> 
 

 

 
     <div class="row"> 
 
     <div class='col-md-8-fluid'> 
 
      <!--recently search was here--> 
 
      <a class="navbar-brand" href="index.html"> 
 
      <img src="images/iccn.png" height="50px" width="100px"> 
 
      </a> 
 
     </div> 
 
     <br> 
 
     <div class='col-md-4-fluid'> 
 
      <h3>Nepal Safety</h3> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class='clearfix'></div> 
 
    <div class="navbar-header">

Answer 1

ここでは、次のとおりです。

<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 

 

 
    <div class='col-md-12-fluid' style="padding-bottom: 2px; background-color:#7E8F7C; min-height: 500px;"> 
 
     <div class="row" style="background-color:red !important"> 
 
     <div class='col-md-8-fluid'> 
 
      <!--recently search was here--> 
 
      <a class="navbar-brand" href="index.html"></a> 
 
     </div> 
 
     <div class='col-md-4-fluid' style="background-color:#3B3738; height:25px;"> 
 
      <h3>Nepal Safety</h3> 
 
     </div> 
 
     </div> 
 

 

 
     <div class="row" style="clear: both"> 
 
     <div class='col-md-8-fluid' style="width: 500px; margin: 0 auto; background: blue"> 
 
      <!--recently search was here--> 
 
      <a class="navbar-brand" href="index.html" style="float: left"> 
 
      <img src="images/iccn.png" height="50px" width="100px"> 
 
      </a> 
 
      
 
      <h3>Nepal Safety</h3> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    <div class='clearfix'></div> 
 
    <div class="navbar-header">

Answer 2

これは動作するはずです：

 <nav class="navbar navbar-default navbar-fixed-top"> 
    <div class="container-fluid"> 
    <!-- Brand and toggle get grouped for better mobile display --> 


    <div class='col-md-12-fluid' style=" 

     padding-bottom: 2px; 
     background-color:#7E8F7C; 

     "> 
     <div class="row" style="background-color:red !important"> 
     <div class='col-md-8-fluid'> 
      <!--recently search was here--> 
      <a class="navbar-brand" href="index.html"></a> 
     </div> 
     <div class='col-md-4-fluid' style="background-color:#3B3738; height:25px;"> 
      <h3>Nepal Safety</h3> 
     </div> 
     </div> 


     <div class="row"> 
     <div class='col-md-6'> 
      <!--recently search was here--> 
      <a class="navbar-brand" href="index.html" style="float:right;"> 
      <img src="images/iccn.png" height="50px" width="100px"> 
      </a> 
     </div> 
     <br> 
     <div class='col-md-6'> 
      <h3>Nepal Safety</h3> 
     </div> 
     </div> 
    </div> 

    <div class='clearfix'></div> 
    <div class="navbar-header"> 

を、私はそれらの各画面の半分の幅を作り、6,6ように列を変更しました。私は列のクラスから "流体"を削除しました（あなたは流体に包囲されたdivを持っているので、その流体は必要ありません）。最後に、ヘッダーの横に座るようにイメージを右に浮かべました。

それはあなたが探していたものだ場合を教えてください！