Question

我在导航键和搜索按钮之间有一个徽标，我想将徽标放在页面的中央。使用水平自动页边距可以使中心div移到右侧，而左侧的内容则更大。

.flexbox {
  display: flex;
}
.logo {
  margin: 0 auto;
}

<div class="flexbox">
  <div class="left-nav">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
    <a href="#">Link4</a>
    <a href="#">Link5</a>
    <a href="#">Link6</a>
    <a href="#">Link7</a>
    <a href="#">Link8</a>

  </div>
  <div class="logo">
    Logo
  </div>
  <div class="right-search">
    search
  </div>
</div>

Answer 1

为您的CSS尝试一下。

它使div在监视器上具有一定的宽度，并使徽标文本居中。

 new GridView.count(
                    shrinkWrap: true,
                    primary: false,
                    childAspectRatio: 2.0,
                    crossAxisCount: 3,
                    mainAxisSpacing: 10.0,
                    children: _kCategoryTiles.map((_FilterItemTile item) {
                      return new GridTile(
                        child: new Container(
                          alignment: Alignment.center,
                          decoration: new BoxDecoration(
                            shape: BoxShape.rectangle,
                            borderRadius: new BorderRadius.all(
                                new Radius.elliptical(10.0, 20.0)),
                            border: new Border.all(
                              color: const Color(0xFF33b17c),
                            ),
                          ),
                          margin: new EdgeInsets.all(10.0),
                          child: new Text(
                            item.itemName,
                            textAlign: TextAlign.center,
                            style: new TextStyle(
                              color: Colors.black,
                              fontSize: 12.0,
                              fontFamily: 'helvetica_neue_medium',
                              letterSpacing: 0.59,
                            ),
                          ),
                        ),
                      );
                    }).toList(),
                  )

    .flexbox {
      display: flex;
    }
    .left-nav{
    	width:25%;
    }
    .logo {
      width:50%;
      text-align: center;
    }
    .right-search{
    	width:25%;
    }

Answer 2

或

.flexbox {
  display: flex;
}
.left-nav,
.right-search {
    flex: 0 0 25%;
}
.logo {
  flex: 0 0 50%;
  text-align: center;
}

不要忘记添加供应商前缀。

Answer 3

您需要在这些元素上设置柔度基准值，然后设置收缩值，以便它们可以基于其基础具有各自的宽度。您还需要声明align-items: center

.flexbox {
  display: flex;
  align-items: center;
}

.flexbox>div {
  flex-basis: 33%;
}

.left-nav {
  flex-flow: column wrap;
  flex-shrink: 2;
}

.logo {
  flex-shrink: 1;
  text-align: center;
}

.right-search {
  flex-shrink: 2;
}

<div class="flexbox">
  <div class="left-nav">
    <a href="#">Link1</a>
    <a href="#">Link2</a>
    <a href="#">Link3</a>
    <a href="#">Link4</a>
    <a href="#">Link5</a>
    <a href="#">Link6</a>
    <a href="#">Link7</a>
    <a href="#">Link8</a>

  </div>
  <div class="logo">
    Logo
  </div>
  <div class="right-search">
    search
  </div>
</div>

CSS Flexbox-在两个div之间居中放置一个div

3 个答案: