ボックス内にiタグを配置する方法jquery

Question

私はこのアイコンを持っています​​と私はそれらを私のdivの中心にしたい。どうすればそれを達成できますか？ブートストラップで行うことはできますか？あなたが最初にそれを行うことができます

jQuery(document).ready(function($) { 
 
    //portfolio - show link 
 
    $('.fdw-background').hover(
 
    function() { 
 
     $(this).animate({ 
 
     opacity: '1' 
 
     }); 
 
    }, 
 
    function() { 
 
     $(this).animate({ 
 
     opacity: '0' 
 
     }); 
 
    } 
 
); 
 
});

.tiles_border { 
 
    border: 1px #ffffff solid; 
 
    border-radius: 6px; 
 
} 
 

 
.fdw-background { 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
    opacity: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px #ffffff solid; 
 
    border-radius: 6px; 
 
    cursor: pointer; 
 
} 
 

 
.fdw-background h2 { 
 
    font-weight: 700; 
 
    font-family: 'Dosis', sans-serif; 
 
    text-align: center; 
 
    color: #FFF; 
 
} 
 

 
.fdw-background p { 
 
    text-align: center; 
 
    color: #fff; 
 
    font-size: 20px; 
 
} 
 

 
.fdw-background .fdw-port { 
 
    text-align: center; 
 
    padding: 0 40px 0; 
 
} 
 

 
.fdw-background .fdw-port a { 
 
    padding: 8px 15px; 
 
    font-size: 1em; 
 
} 
 

 

 
/*subtitle*/ 
 

 
.fdw-subtitle { 
 
    font-size: 0.8em; 
 
    margin-top: -20px; 
 
    color: #0CF; 
 
} 
 

 
.fdw-subtitle a { 
 
    color: #F90; 
 
} 
 

 
#koncerty { 
 
    background-image: url("http://placehold.it/400x550"); 
 
    height: 400px; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<script src="https://use.fontawesome.com/62cf094036.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-sm-12"> 
 
     <div id="koncerty" class="tiles_border"> 
 
     <div style="opacity: 0;" class="fdw-background atrakcje-tekst"> 
 
      <h2>KONCERTY</h2> 
 
      <br> 
 

 
      <p>Na targach wystąpią: 
 
      <br> 
 
      <i class="fa fa-long-arrow-right" aria-hidden="true">Andre</i> <br> 
 
      <i class="fa fa-long-arrow-right" aria-hidden="true">Bobi</i> <br> 
 
      <i class="fa fa-long-arrow-right" aria-hidden="true">Kosmokwaki</i> 
 
      </p> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 1

つの方法はあなたにホワイトスペース ノートそのクラスからの4つのcolumsを与え、これが何をするかのアイコンが含まれているdivの上のブートストラップCOL-オフセット-4クラスとされていますあなたのdivがへCOL-MD-6からの変更COL-MD-オフセット-4

<div class="col-md-offset-4 col-sm-12"> 
      <div id="koncerty" class="tiles_border"> 
       <div style="opacity: 0;" class="fdw-background atrakcje-tekst"> 
       <h2>KONCERTY</h2> 
       <br> 

       <p>Na targach wystąpią: 
        <br> 
      <i class="fa fa-long-arrow-right" aria-hidden="true">Andre</i> <br> 
      <i class="fa fa-long-arrow-right" aria-hidden="true">Bobi</i> <br> 
      <i class="fa fa-long-arrow-right" aria-hidden="true">Kosmokwaki</i> 
      </p> 
     </div> 
     </div> 

    </div> 

その他の方法であるCOL-MD-12との完全な幅の列を設定し、テキスト中心と中央にあるアイコンを中央にありますクラス

<div class="col-sm-12 text-center"> 
      <div id="koncerty" class="tiles_border"> 
       <div style="opacity: 0;" class="fdw-background atrakcje-tekst"> 
       <h2>KONCERTY</h2> 
       <br> 

       <p>Na targach wystąpią: 
        <br> 
      <i class="fa fa-long-arrow-right" aria-hidden="true">Andre</i> <br> 
      <i class="fa fa-long-arrow-right" aria-hidden="true">Bobi</i> <br> 
      <i class="fa fa-long-arrow-right" aria-hidden="true">Kosmokwaki</i> 
      </p> 
     </div> 
     </div> 

    </div> 

Answer 2

divのinbuiltクラス.text-centerを使用すると、すべてのインライン要素またはテキストをdivの中心にすることができます。

iタグをセンタリングするCSS宣言を避けることができます。

さらに、あなたのdivラッパーをブラウザに中央揃えにしたい場合は、あなたが持っているものの代わりにcol-md-offset-4 col-md-5 col-sm-12をdivに使用する必要があります現在使用されています。

お気軽にお返事ください。

jQuery(document).ready(function($) { 
 
    //portfolio - show link 
 
    $('.fdw-background').hover(
 
    function() { 
 
     $(this).animate({ 
 
     opacity: '1' 
 
     }); 
 
    }, 
 
    function() { 
 
     $(this).animate({ 
 
     opacity: '0' 
 
     }); 
 
    } 
 
); 
 
});

.tiles_border { 
 
    border: 1px #ffffff solid; 
 
    border-radius: 6px; 
 
} 
 

 
.fdw-background { 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
    opacity: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px #ffffff solid; 
 
    border-radius: 6px; 
 
    cursor: pointer; 
 
} 
 

 
.fdw-background h2 { 
 
    font-weight: 700; 
 
    font-family: 'Dosis', sans-serif; 
 
    text-align: center; 
 
    color: #FFF; 
 
} 
 

 
.fdw-background p { 
 
    text-align: center; 
 
    color: #fff; 
 
    font-size: 20px; 
 
} 
 

 
.fdw-background .fdw-port { 
 
    text-align: center; 
 
    padding: 0 40px 0; 
 
} 
 

 
.fdw-background .fdw-port a { 
 
    padding: 8px 15px; 
 
    font-size: 1em; 
 
} 
 

 

 
/*subtitle*/ 
 

 
.fdw-subtitle { 
 
    font-size: 0.8em; 
 
    margin-top: -20px; 
 
    color: #0CF; 
 
} 
 

 
.fdw-subtitle a { 
 
    color: #F90; 
 
} 
 

 
#koncerty { 
 
    background-image: url("http://placehold.it/400x550"); 
 
    height: 400px; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
<script src="https://use.fontawesome.com/62cf094036.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6 col-sm-12"> 
 
     <div id="koncerty" class="tiles_border"> 
 
     <div style="opacity: 0;" class="fdw-background atrakcje-tekst"> 
 
      <h2>KONCERTY</h2> 
 
      <br> 
 

 
      <p>Na targach wystąpią: 
 
      <br> 
 
      <i class="fa fa-long-arrow-right" aria-hidden="true">Andre</i> <br> 
 
      <i class="fa fa-long-arrow-right" aria-hidden="true">Bobi</i> <br> 
 
      <i class="fa fa-long-arrow-right" aria-hidden="true">Kosmokwaki</i> 
 
      </p> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 
</div>