Flexbox - 中心文本

我有一个方形的flexbox，它完全覆盖了一个超链接。Flexbox - 中心文本

现在我想垂直居中flexbox的内容。

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

如果我使用div而不是ul和li我失去了可以随处点击的属性。

我想“文本”在红色框的水平和垂直居中对齐：

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>

来源

2017-01-30 Skrodde

取出多余的股利，并覆盖整个高度的链接本身弯曲的物品，并有自己的内容居中。 – CBroe

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>

来源

2017-01-30 15:50:20

在你.tile delcaration，你需要的Flexbox的代码如下：

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

您LI声明应该只是显示：块，因为它不使用flexbox属性。

来源

2017-01-30 15:50:19

改变你的CSS如下：

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

你不会失去你的方形和填充总是将文本居中。

您可以点击此处查看：

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

来源

2017-01-30 15:52:16 FioleNana

我删除的.tile的:before部分，它移动到a标签（现类编click-container因为它不觉得像在哪里。它应该是，你想a元素本身是正方形的，而不是它的内容

既然我们有一个方形锚点，你可以使用任何垂直对齐技巧来居中内容，在这个例子中，我用绝对+ TRA nslate招：

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>

来源

2017-01-30 16:02:42 AVAVT

Flexbox - 中心文本

回答

相关问题