Question

实现此布局的最佳方法和最佳做法是什么？这意味着它将在iPad，Android或桌面上保持一致。 CSS网格？ Flexbox的？徽标div应垂直和水平居中在页面上。文本div应位于徽标div的中间。

Answer 1

没有正确的方法，你可以使用任何你喜欢的东西，但是我会建议flexbox用于那个demande，但你可以用网格做到这一点。

.container{
  display: flex;
  justify-content: space-around; /* to meet your need or space-between*/
  align-items: center; /* vertical */
}

.container{ /* get all the space */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.container, .container > .item{
  display: flex;
  justify-content: space-around; /* horizontal, nice to try: center or space-between*/
  align-items: center; /* vertical */
}
    
.item {
  border: 2px solid blue;
  width: 150px;
  height: 100px;
}

.large{
  height: 200px;
}

@media screen and (max-width: 480px) { /* using media query to detect screen size */
  .container{
    flex-direction: column; /* switch display into column */
  }
}

<div class="container">
  <div class="item">Text Div Centered</div>
  <div class="item large">Logo Centered</div>
  <div class="item">Text Div Centered</div>
</div>

Answer 2

你能用桌子吗？并删除border / cellspacing ??

   td {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    }

<table>
<tr>
<td><div class="div1">test</div></td>
<td><div class="div2">test</div></td>
<td><div class="div3">test</div></td>
</tr>
<tr>
<td><div class="div1">test</div></td>
<td><div class="div2">test</div></td>
<td><div class="div3">test</div></td>
</tr>
</table>

Answer 3

您可以使用 Flexbox 来实现这一目标。首先创建一个.flex容器，其中包含display:flex属性。现在将flex:1应用于其子女。它的所有孩子都有相同的宽度。

但是从显示的图像中，您的Logo Div高度较大，然后在此处对单个元素应用相同的高度。但是，如果你观察，没有任何东西集中。因此，为了将每个框都居中，您需要使用align-items:center上的justify-content:center和.flex属性。

即使现在里面的文字也没有居中，但是盒子是垂直和水平居中的。要在孩子身上实现相同的目标，请将display:flex和上述相同的集中方法应用于其子女。现在孩子们的内容，即里面的文字也集中在一起。

＆＃13;

.flex, .flex > div{
  display:flex;
  align-items:center;
  justify-content:center;
}
.flex > div{
  flex:1;
  height:80px;
  margin:5px;
  border:1px solid blue;
}
.flex .logoDiv{
  height:150px;
  width:100%;
}

＆＃13;

<div class='flex'>
  <div class='textDiv'>Text Div Centered</div>
  <div class='logoDiv'>Logo Centered</div>
  <div class='textDiv'>Text Div Centered</div>
</div>

＆＃13;

徽标和两个文本div在页面上以水平方向和水平方向居中

3 个答案: