Question

我想通过允许用户选择以下选项来对齐父容器中的div：

左上角
Top Middle
右上角
左中间
居中
右中间
左下角
Bottom Middle
右下角

虽然我发现很多资源如何使用flexbox进行垂直和水平对齐，但我想知道是否有人创建了一个我可以轻松应用的CSS类的简单集合。

修改：
基本标记非常简单，只需一个按钮：

<div>
    <div class="btn">This is my button</div>
</div>

现在进入＆＃34; Right Middle＆＃34;我理想的做法是：

<div class="vertical-align-middle horizontal-align-right">
   <div class="btn">This is my button</div>
</div>

Answer 1

您可以通过创建一个container元素来为这个元素定位元素，每个元素包含3个子容器，每行包含以下css。

display: flex;
flex-direction: column;
justify-content: space-between;

这将在容器的顶部，中间和底部定位行。接下来，您可以为每一行使用此css，并将div放在行的左侧，中间和右侧。

display: flex;
justify-content: space-between;

＆＃13;

body,
html {
  margin: 0;
  padding: 0;
}
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.row {
  display: flex;
  justify-content: space-between;
}
.box {
  border: 1px solid black;
}

＆＃13;

<div class="content">
  <div class="top row">
    <div class="box">Top left</div>
    <div class="box">Top center</div>
    <div class="box">Top right</div>
  </div>
  <div class="middle row">
    <div class="box">Middle left</div>
    <div class="box">Middle center</div>
    <div class="box">Middle right</div>
  </div>
  <div class="bottom row">
    <div class="box">Bottom left</div>
    <div class="box">Bottom center</div>
    <div class="box">Bottom right</div>
  </div>
</div>

＆＃13;

如果容器中有单个元素，那么您可以使用align-items和justify-content的不同组合来定位元素，但这也取决于flex-direction（默认情况下是行）。因此，例如，如果您想将元素置于底部中心，则可以使用

display: flex;
align-items: flex-end;
justify-content: center;

＆＃13;

body,
html {
  margin: 0;
  padding: 0;
}
.content {
  height: 100vh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.btn {
  border: 1px solid black;
}

＆＃13;

<div class="content">
  <div class="btn">Button</div>
</div>

＆＃13;

Answer 2

看一下我的例子，你需要为每个位置创建类，然后使用一点jQuery来动态地改变它。

＆＃13;

(function() {
  $(".select-box").on("change", function() {
    var $selected = $(this).find("option:selected").val();
    $("#content").removeClass().addClass($selected);
  });
})();

＆＃13;

.select-box {
  position: absolute;
  top: 100px;
  left: 100px;
}
#content {
  display: flex;
  width: 600px;
  height: 400px;
  padding: 20px;
}
.box {
  width: 50px;
  height: 50px;
  background-color: fuchsia;
}

#content.top-left {
  justify-content: flex-start;
  align-items: flex-start;
}
#content.top-middle {
  justify-content: center;
  align-items: flex-start;
}
#content.top-right {
  justify-content: flex-end;
  align-items: flex-start;
}
#content.left-middle {
  justify-content: flex-start;
  align-items: center;
}
#content.centered {
  justify-content: center;
  align-items: center;
}
#content.right-middle {
  justify-content: flex-end;
  align-items: center;
}
#content.bottom-left {
  justify-content: flex-start;
  align-items: flex-end;
}
#content.bottom-middle {
  justify-content: center;
  align-items: flex-end;
}
#content.bottom-right {
  justify-content: flex-end;
  align-items: flex-end;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<div id="content">
  <div class="box"></div>
</div>
<select class="select-box">
  <option value="top-left">Top Left</option>
  <option value="top-middle">Top Middle</option>
  <option value="top-right">Top Right</option>
  <option value="left-middle">Left Middle</option>
  <option value="centered">Centered</option>
  <option value="right-middle">Right Middle</option>
  <option value="bottom-left">Bottom Left</option>
  <option value="bottom-middle">Bottom Middle</option>
  <option value="bottom-right">Bottom Right</option>
</select>

＆＃13;

Answer 3

morass库可能很有用。

$ mkdir test-project
$ npm init
$ npm install morass
$ edit index.html
$ serve

其中index.html是：

<html>

  <head>
    <style>
      .big { height: 200px; width: 200px; outline: 1px red solid; }
      .small { height: 100px; width: 100px; outline: 1px green solid; }
    </style>
    <link rel='stylesheet' href='./node_modules/morass/dist/index.css'/>
  </head>

  <body>
    <div class='big flex align-left align-bottom'>
                    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      <div class='small'></div>
    </div>
  </body>

</html>

您可以将align-left替换为align-center或align-right，将align-bottom替换为align-middle或align-top等。

这个morass库基于所谓的“微类”。例如，您还可以添加vertical类以使Flex项目从上到下，或者添加多个项目justify以将其展开。

使用CSS动态对齐项目

3 个答案: