Flexbox - 垂直居中文本[重复]

Posted

技术标签:

【中文标题】Flexbox - 垂直居中文本[重复]【英文标题】:Flexbox - center text vertically [duplicate] 【发布时间】:2017-06-15 20:12:26 【问题描述】:

我有一个方形的弹性盒子,它被一个超链接完全覆盖。

现在我想将弹性框的内容垂直居中。

但是,使用属性为display: tablediv 元素和属性为display: table-cell; vertical-align: middle 的嵌套div 不起作用,因为我失去了正方形。

如果我使用divs 而不是ulli,我将失去能够在任何地方点击的属性。

我希望“文本”在红色框的水平和垂直中心对齐:

body 
  margin: 0px;
  width: 100%;

main 
  width: 100%;
  display: flex;
  flex-wrap: wrap;

.flex-container 
  width: 100%;

ul 
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  -webkit-padding-start: 0px;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;

li 
  display: flex;
  flex-direction: column;
  width: 50%;

.red 
  background-color: red;

.white 
  background-color: white;

.tile:before 
  content: '';
  float: left;
  padding-top: 100%;

.tile 
  text-align: center;
<main>
  <div class="flex-container">
    <ul>
      <li class="red">
        <a href="/">
          <div class="tile">
            Text
          </div>
        </a>
      </li>
    </ul>
  </div>
</main>

【问题讨论】:

去掉多余的div,让链接本身的flex项目覆盖整个高度,并使其内容居中。 【参考方案1】:

main 
  height: 200px;
  width: 200px;

a 
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: red;
  height: 100%;
<main>
  <a href="/">
    <div class="tile">Text</div>
  </a>
</main>

【讨论】:

div 应该是一个 span,因为将块元素 (div) 嵌套在内联元素 (a) 中并不是一个好习惯 @AndrewBrntt,感谢您的信息,但这种做法已经过时了。对于 html5,锚元素 (a) 中的 div 元素是完全有效且可接受的做法。用更专业的术语来说,锚元素可以包含 flowphrasing 内容。 Divs 代表流内容。 developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Properties 好吧,我不知道已经改变了谢谢【参考方案2】:

在您的 .tile 声明中,您需要 flexbox 代码如下:

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

你的 LI 声明应该只是 display:block 因为它没有使用 flexbox 属性。

【讨论】:

【参考方案3】:

按如下方式更改您的 CSS:

    .tile:before 
        content: '';
        float: left;
    
    .tile 
        text-align: center;
        padding-top: 50%;
        padding-bottom: 50%;
    

你不会失去你的方形,并且填充将始终居中文本。

你可以在这里查看:

https://plnkr.co/edit/BgPW9exwJpyxHFn5fMBP?p=preview

【讨论】:

【参考方案4】:

我删除了.tile:before 部分,并将其移至a 标记(现在已分类click-container。因为它感觉不应该在哪里。你想要@987654325 @ 元素本身是方形的,而不是它的内容。

现在我们有了一个方形锚点,你可以使用任何垂直对齐技巧来使内容居中,在这个例子中我使用了绝对+翻译技巧:

body 
  margin: 0px;
  width: 100%;

main 
  display:flex; 
  flex-wrap:wrap;

.flex-container 
  width: 100%;

ul 
  display: flex;
  flex-wrap:wrap;
  list-style: none;
  -webkit-padding-start:0px;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;

li 
  display: flex;
  flex-direction: column;
  width: 50%;

.red 
  background-color: red;

.white 
  background-color: white;


/* edited code */
.tile 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

.click-container 
  display: block;
  text-align: center;
  position: relative;

.click-container:before
  float: left;
  padding-top: 100%;
  content: "";
<body>    
  <main>
    <div class="flex-container">
      <ul>
        <li class="red">
          <a class="click-container" href="/">
            <div class="tile">
              Text
            </div>
          </a>
        </li>
      </ul>
    </div>
  </main>
</body>

【讨论】:

以上是关于Flexbox - 垂直居中文本[重复]的主要内容,如果未能解决你的问题,请参考以下文章

Flexbox:如何垂直居中[重复]

如何使用 flexbox 垂直居中 div [重复]

如何使用 flexbox 垂直居中文本? [复制]

垂直和水平居中的flexbox [重复]

在本机反应中,Flexbox中的文本垂直居中对齐

使用flexbox在链接中垂直对齐文本[重复]