Question

我使用Zurb foundation v.6制作了标准标题栏：

<div class="header-title-bar">
  <div class="row">
    <div class="large-12 columns">
      <div class="title-bar">
        <div class="title-bar-left">
          <a data-open="offCanvasLeft" class="menu-icon-left"><button class="menu-icon" type="button" ></button><span class="title-bar-title">Meny</span></a>
          <a data-open="offCanvasTop" class="menu-icon-top"><button class="menu-icon" type="button"></button><span class="title-bar-title">Meny</span></a>

        </div>
        <div class="title-bar-right">
          <span class="title-bar-title"><a href="/"><img src="<?php echo get_template_directory_uri(); ?>/assets/images/sfk-logo.png"></a></span>
        </div>
      </div>
    </div>
  </div>
</div>

我遇到的问题是在小屏幕上我想垂直对齐项目，我尝试使用flex显示：

.title-bar {
  display: flex;
  align-items: center;
}

垂直对齐项目，但title-bar-right然后一直向左移动。如何垂直对齐项目，并且每个位置都有title-bar-left和title-bar-right位置？

Answer 1

您可以将justify-content设置为space-between，告诉浏览器均匀分发内容，从而实现这一目标：

.title-bar {
   display: flex;
   align-items: center;
   justify-content:space-between;
}

Answer 2

Flexbox子项目不支持浮点数，因此尽管您将其垂直居中，但子项目中的浮点数（即titlebarleft，titlebarright）实际上使用的实际上是无用的。要使它们与末端对齐，您需要证明内容：间隔。因此，整个空间将以这样的方式划分，即子元素在它们之间具有相等的空间。由于只有两个项目，他们会坚持到底。但是，如果有第三个孩子，它将进入这些元素的中间。因此名称：空间。

.title-bar {
   display: flex;
   align-items: center;
   justify-content:space-between;
   width:100%; (or any other width you like)
}

Answer 3

您可以使用title-bar和display: table;

覆盖小型设备的display: table-cell;课程

.title-bar {
  display: table;
  width: 100%;
  vertical-align: middle;
}

.title-bar-left,
.title-bar-right {
  float: none;
  display: table-cell;
}

更好的方法是，如果您正在使用基金会的flex-grid，则可以使用此示例中的row和columns：

<div class="header-title-bar">
  <div class="row">
    <div class="large-12 columns">
      <div class="title-bar row align-middle">
        <div class="title-bar-left columns">
          <a data-open="offCanvasLeft" class="menu-icon-left"><button class="menu-icon" type="button" ></button><span class="title-bar-title">Meny</span></a>
          <a data-open="offCanvasTop" class="menu-icon-top"><button class="menu-icon" type="button"></button><span class="title-bar-title">Meny</span></a>
        </div>

        <div class="title-bar-right columns shrink">
          <span class="title-bar-title"><a href="/"><img width="50" height="50" src="<?php echo get_template_directory_uri(); ?>/assets/images/sfk-logo.png"></a></span>
        </div>
      </div>
    </div>
  </div>
</div>

只是覆盖行的边距：

.title-bar {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

CSS - 基础标题栏对齐项目

3 个答案: