文本未垂直居中

Question

我正在尝试在仪表板上创建可点击的磁贴(框形(。

问题 1：我尝试使用弹性框，但垂直对齐对我不起作用。 所以我尝试使用填充顶部。我正在寻找的是磁贴应该具有垂直居中的图标和文本，这些图标和文本也应该以响应方式维护(使用引导程序(。

div.wrapper{
height:150px;
padding:20px;
padding-top:30%;
border:1px solid black;
margin:auto;
text-align:center
}

使用填充顶部无法响应。减小屏幕宽度时，文本和图标会从磁贴中出现。使用行高等于框高度会使多行文本远离磁贴。

问题 2：为了使全磁贴可点击，我尝试在我的锚标签上使用 display：block，当它位于div内时

<div class="col-md-2 button-col">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
<a href="<?php echo base_url(); ?>listitems" class="mybutton">Manage Items</a>
</div>
</div>

.css：

a.mybutton{
font-weight:bold;
text-decoration:none;
font-family:Arial;
display: block;
}

但全磁贴没有变得可点击。所以我在div 外面放置了锚标签。

这是我目前的布局：

<div class="container">
<div class="row">
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Click for Production Calculation Chart
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Production Calculation Chart
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Tile Number 3
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
This is Tile 4
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Tile 5
</div>
</a>
</div>
<div class="col-md-2 button-col">
<a href="<?php echo base_url(); ?>listitems" class="mybutton">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Tile 6 Text
</div>
</a>
</div>
<!-- And Many More Tiles Will Come and make more rows -->
</div>
</div>

这是我目前的 css：

div.button-col{
padding:2rem;
}
div.wrapper{
height:150px;
padding:20px;
border:1px solid black;
margin:auto;
text-align:center
}
div.wrapper:hover{
background-color:blue;
cursor: pointer
}
div.wrapper i.fa{
color:#438EB9;
}
div.wrapper:hover i.fa {
color:white;
} 
a.mybutton{
font-weight:bold;
text-decoration:none;
font-family:Arial;
}
a.mybutton:hover
{
color:white;
}

Answer 1

终于有一个非常适合我的解决方案。请建议这是否是最好的解决方案？或者我们可以做得更好

.button-col{
display: table;
width: 100%;
height: 150px; /* for demo only */
border: 1px solid black;
margin-bottom:20px;
}
.centeralign{                
display: table-cell;
text-align: center;
vertical-align: middle;
}
.contentouter{
width:100%;
height:100%;
display: inline-block;
vertical-align: top;
}
div.button-col:hover, div.button-col:hover a{
background-color:blue;
color:white;
}
.icon{
margin-top:30px;
margin-bottom:10px;
}
.content
{
display: table;
width: 100%;
height: 70px;
}
.contentinner{                
display: table-cell;
text-align: center;
vertical-align: middle;
}
a.my-button
{
font-weight:bold;
text-decoration:none;
}

.HTML：

<div class="col col-sm-2 button-wrapper">
<a href="my_url" class="my-button">
<div class="button-col">
<div class="centeralign">
<div class="contentouter">
<div class="icon">
<i class="fa fa-gear fa-2x"></i>
</div>
<div class="content">
<div class="contentinner">
Items
</div>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="col col-sm-2 button-wrapper">
<a href="my_url" class="my-button">
<div class="button-col">
<div class="centeralign">
<div class="contentouter">
<div class="icon">
<i class="fa fa-gear fa-2x"></i>
</div>
<div class="content">
<div class="contentinner">
Click for Production Calculation Chart
</div>
</div>
</div>
</div>
</div>
</a>
</div>

Answer 2

问题 1的答案： 尝试将样式设置为链接"a"元素，并改为删除手动定位和用户vertical-align属性：

div.wrapper{
border: 1px solid black;
padding: 10px;
text-align: center;
}
div.wrapper a{
display: inline-block;
vertical-align: middle;
}

我还从 HTML 中删除了<br>：

<div class="col-md-2 button-col">
<div class="wrapper">
<i class="fa fa-gear fa-2x"></i>
<a href="<?php echo base_url(); ?>listitems" class="mybutton">Manage Items</a>
</div>
</div>

如果您仍然想要一个<i>，并且每个<a>都设置在自己的行中，那么用<div>包裹<i>，它应该垂直和水平居中。

请注意，需要像inline-block这样的正确显示类型才能使垂直中心正常工作。

查看它的实际效果 https://jsfiddle.net/74wg2za6/

问题 2的答案 要使整个磁贴可点击，只需用<a>包装整个包装器div 而不是使文本"管理项目"只能单击，请在此处查看

https://jsfiddle.net/kr45qoa1/

我只是利用<a>标签来包装所有<div>、<i>和文本。

希望这就是你要找的。

Answer 3

你能试试吗：

<!DOCTYPE html>
<html>
<head>
<script src='js/fontawesome-all.min.js'></script>
<style>
div.button-col{
height:150px;
line-height: 150px;
width: 100%;
margin: 20px auto;
text-align:center;
}
a.mybutton{
width: 90%;
display:inline-block;
padding: 20px;
line-height: 20px;
border:1px solid black;
font-weight:bold;
text-decoration:none;
cursor: pointer;
}
a.mybutton:hover {
background-color:blue;
color:white;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2 button-col">
<a href="my_url" class="mybutton">
<i class="fa fa-gear fa-2x"></i>
<br><br>
Click for Production Calculation Chart
</a>
</div>
</div>
</div>
</body>
</html>