想要将页面的徽标中心放在两行

Question

我想制作类似网格的 5.5-1-5.5 。是否有可能，因为我想将该徽标放在页面的中央，左边的两行和＆amp;对？ （我的英语不好）

Answer 1

flex和伪将会：

.lines {
  display: flex;
  align-items: center;
}

.lines:before,
.lines:after {
  content: '';
  border: 4px solid black;
  flex: 1;
}

img {
  margin: 0 1em;
  border-radius:50%;
}

<div class="lines"><img src="http://dummyimage.com/150x150&text=logo"></div>

Answer 2

为什么不使用这样的背景？

＆＃13;

＆＃13;

.background{
  display: flex;
  align-content: center;
  justify-content: center;
  background: url('https://i.imgur.com/kBiG6ql.png') center repeat-x;
}

＆＃13;

<div class="background">
  <img class="logo" src="https://i.imgur.com/h4J7ZvW.png"/>
</div>

＆＃13;

＆＃13;

＆＃13;