Question

这是我的内联表格：

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

问题是元素没有居中/对齐。任何人都可以帮助我吗？

Answer 1

假设您想要整个内联表单居中，下面的页面演示了一个居中的内联表单：

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

Answer 2

有很多方法可以调整表单。由于您使用的是twitter bootstrap，因此您可以使用网格系统：

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

  </div> 
</div>

这样做是因为它将您的内容放在屏幕的8/12上，并通过将其偏移在左侧2/12来居中。希望这会有所帮助，从现在开始尝试使用网格系统，它是boostraps'非常强大的工具之一！

Answer 3

您可以使用CSS form将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>

我需要将元素以内联形式居中

3 个答案: