Css 为什么我的 <a> 标签不在我的“div”中间。 align=middle 不起作用答案

【问题标题】：Css why isn't my <a> tag in the middle of my "div". valign=middle does not workCss 为什么我的 <a> 标签不在我的“div”中间。 align=middle 不起作用
【发布时间】：2019-06-03 10:21:37
【问题描述】：

这是我的 div 的代码：

 <div height="45" align="center" valign="middle" style="font-family: 'Lato', sans-serif; font-size: 14px; border-radius: 6px; 
color: #ffffff;line-height:15px;background-color: #24b646;width: 180px;padding: 0px;margin: 30px 0 30px 60px;height: 45px;"
class="mobileWidth100 mobilePadding0">
     <a valign="middle" width="auto" href="" target="_blank" alias="" style="font-family: 'Lato', sans-serif; 
     text-decoration: none; color: #ffffff;font-weight:bold; letter-spacing:1px;margin: auto;height: 45px;
     line-height: 15px;">{% trans 'Manage Team'%}</a>
 </div>

我在 div 上设置了 45px 的高度。我已经将 valign 设置为中间，甚至将边距设置为 auto，但仍然没有运气。它看起来像这样：

【问题讨论】：

标签： html angularjs css django-templates

【解决方案1】：

我会在 div 内的元素（即 a 标签）上使用以下 css

显示：表格单元格；垂直对齐：中间；

a{
font-family: 'Lato', sans-serif;text-decoration: none; color: #ffffff;font-weight:bold; letter-spacing:1px;height: 45px;line-height: 15px;vertical-align: middle;display:table-cell;
}

div{

font-family: 'Lato', sans-serif; font-size: 14px;
border-radius: 6px; 
color: #ffffff;
line-height:15px;
background-color: #24b646;
width: 180px;
padding: 0px;
margin: 30px 0 30px 60px;
height: 45px;    

}

<div height="45" align="center" valign="middle" style=""
class="mobileWidth100 mobilePadding0">
     <a width="auto" href="" target="_blank" alias="" style="">Example</a>
 </div>

<div height="45" align="center" valign="middle" style=""
class="mobileWidth100 mobilePadding0">
     <a width="auto" href="" target="_blank" alias="" style="">Example over<br>two lines !!!</a>
 </div>

【讨论】：

更改为表格单元格和垂直对齐由于某种原因不起作用，必须删除边距：0px;或边距：自动；从锚点和它工作之后。非常感谢！！

【解决方案2】：

在您的锚标记样式中添加transform: translateY(-50%);-webkit-transform: translateY(-50%); /* Safari & Chrome */ -moz-transform:translateY(-50%) -ms-transform: translateY(-50%);。

【讨论】：

【解决方案3】：

我会建议您处理此类情况的最佳方法。要使垂直居中对齐，可以使用 2 个显示属性。 1. display:table-cell, 2. display:inline-block 但在这两种情况下，需要垂直对齐的元素也需要一个参考来测量高度，以便获得垂直中点。

html

<div>
<span></span>
<a>APPEAR IN MIDDLE</a>
</div>

css

div span, div a{display:inline-block; vertical-align:middle;}
div span, div{height: 200px}
div span{margin-left:-1px; width:1px;}

希望这会对您有所帮助

【讨论】：