我需要为中心元素的形式内嵌

问题描述：

<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>

的问题是，该元素不居中/对齐。谁能帮我？

哪里是试图居中事情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>

请解释你做了什么。另外考虑写一个片段 - 最后它看起来不太好 – mplungjan

@mplungjan，我假设poopp想要使整个内联表格中心对齐。尽管如此，它看起来不太好。：d –

答

有许多方法来调整你的表格。由于您使用Twitter的引导，你可以使用网格系统：

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

    </div> 
</div>

这样做是把它在屏幕的8/12您的内容，并通过抵消它的左边是中心2/12。希望这有帮助，从现在开始尝试使用网格系统，它是boostraps非常强大的工具之一！

答

您可以居中你form的所有子元素，使用CSS Flexbox：

.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>

我需要为中心元素的形式内嵌

相关推荐