私は、フォームのインライン

これは私のフォームをインラインでの中央に要素を必要とする：私は、フォームのインライン

<form class="form-inline"> 
    <div class="form-group"> 
     <label style="font-size:40px">BOOKMARK</label> 
    </div> 
    <div class="form-group"> 
     <label>Privacy</label> 
     <div> 
      <select class="form-control" id="seleziona_checked"> 
       <option select value="tutti">Tutti</option> 
       <option value="pubblica">Pubblica</option> 
       <option value="privata">Privata</option> 
       <option value="collaborativa">Collaborativa</option> 
      </select> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label>Categoria</label> 
     <div> 
      <select class="form-control" id="seleziona_bookmarked_cheked"></select> 
     </div> 
    </div> 
    <div class="form-group"> 
     <i class="fa fa-cog fa-1" aria-hidden="true"></i> 
    </div> 
</form>

問題は要素が/中央に整列されていないということです。誰でも助けてくれますか？

出典

2016-11-15 poopp

どこにあるものを中心にしようとCSS？ – mplungjan

また、CSSを投稿して、どの要素を中央に配置するかを指定してください。 – GraveyardQueen

詳細を更新してください –

あなたは全体のインラインフォームを中央にしたいと仮定すると、以下のページには、中央にインライン形式を示しています

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>centered inline form</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style type="text/css"> 
     .form-inline 
     { 
      text-align: center; 
     } 
    </style> 
</head> 
<body> 
    <form class="form-inline"> 
     <div class="form-group"> 
      <label style="font-size:40px">BOOKMARK</label> 
     </div> 
     <div class="form-group"> 
      <label>Privacy</label> 
      <div> 
       <select class="form-control" id="seleziona_checked"> 
        <option select value="tutti">Tutti</option> 
        <option value="pubblica">Pubblica</option> 
        <option value="privata">Privata</option> 
        <option value="collaborativa">Collaborativa</option> 
       </select> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label>Categoria</label> 
      <div> 
       <select class="form-control" id="seleziona_bookmarked_cheked"></select> 
      </div> 
     </div> 
     <div class="form-group"> 
      <i class="fa fa-cog fa-1" aria-hidden="true"></i> 
     </div> 
    </form> 
</body> 
</html>

出典

2016-11-15 09:33:07

あなたのしたことを説明してください。またスニペットを書くことを検討してください - 最後にそれは非常に良く見えません – mplungjan

@mplungjan、私はプーフが全体のインラインフォームの中心を整列させたいと思っています。確かに、それはとてもよく見えません。：D –

フォームを揃えるには多くの方法があります。あなたはTwitterのブートストラップを使用しているので、あなたはグリッド・システムを使用することができます

<div class="row"> 
    <div class="col-md-8 col-md-offset-2"> 
    //Your markup 

    </div> 
</div>

をこれがないと、それが画面の8/12にあなたのコンテンツを置き、それが2で左にそれを相殺することによってそれを中心にされます/ 12。これが役立つことを願っており、今からグリッドシステムを使用しようとすると、これはブーストラップの非常に強力なツールの1つです！

出典

2016-11-15 09:33:12

あなたはCSS Flexboxを使用して、あなたのformのすべての子要素をセンタリングすることができます

.form-inline { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
.form-inline div { 
 
    margin-bottom: 18px; 
 
} 
 
.form-inline div:first-of-type label { 
 
    font-size: 40px; 
 
}

<form class="form-inline"> 
 

 
    <div class="form-group"> 
 
    <label>BOOKMARK</label> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label>Privacy:</label> 
 
    <select class="form-control" id="seleziona_checked"> 
 
     <option select value="tutti">Tutti</option> 
 
     <option value="pubblica">Pubblica</option> 
 
     <option value="privata">Privata</option> 
 
     <option value="collaborativa">Collaborativa</option> 
 
    </select> 
 
    </div> 
 

 
    <div class="form-group"> 
 
    <label>Categoria:</label> 
 
    <select class="form-control" id="seleziona_bookmarked_cheked"></select> 
 
    </div> 
 
    </div> 
 
    <div class="form-group"><i class="fa fa-cog fa-1" aria-hidden="true"></i> 
 
    </div> 
 

 
</form>

出典

2016-11-15 09:42:40 Rounin

私は、フォームのインライン

答えて

関連する問題