在向左浮动的 div 中垂直居中图像

Posted 2023-03-12

【中文标题】在向左浮动的 div 中垂直居中图像

【英文标题】：Center Image Vertically Within Div That Is Floated Left

【发布时间】：2014-05-02 06:06:21

【问题描述】：

这适用于移动网站标题。页面标题居中，后退按钮图像向左浮动。我希望后退按钮在 pageTitle div 中居中，但无法使其正常工作。

我发现，如果我给 pageTitle div 一个相对的位置，并且 backArrow 的顶部为 0，我可以绕过 pageTitle div 的填充，但我不能再进一步了。给出 50% 的顶部或填充只会让情况变得更糟。

小提琴： http://jsfiddle.net/gjL4z/

CSS：

body 
    background-color: #666;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;

.pageTitle 
    text-align: center;
    padding: 10px;
    color: #ffffff;
    font-size: large;   
    background: #2281b5;
    position: relative;

.backArrow 
    float: left;    
    position:absolute; 
    top: 0;  

HTML：

<div class="pageTitle">
    <div class="backArrow">
        <a href="index.php">
            <img src="http://s27.postimg.org/5iv71nvkf/backward_Arrow.png"   />
        </a>
    </div>
    Page Title
</div>

【问题讨论】：

jsfiddle.net/gjL4z/2

jsfiddle.net/rajmathan/67avS

查看这个基于 CSSTricks 解决方案的答案：***.com/a/21919578/1491212

【参考方案1】：

你可以这样做：

http://jsfiddle.net/gjL4z/6/

.backArrow 
    float: left;    
    position:absolute;
    height:100%;
    top:0;

.backArrow a
    display: block;
    height:100%;
    text-align: center;
    font: 0/0 a;


.backArrow a:before 
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;


.backArrow a img
    vertical-align: middle;
    display: inline-block;

---

这是基于可以使用vertical-align: middle 垂直对齐2 个inline-block 元素的想法。

我们在这里做的是：

我们将a 元素设为display:block，并将高度设置为100%，因此下面添加的元素将占据栏的全部高度。

我们创建一个inline-block伪元素作为父元素的第一个子元素，并将其高度设置为100%。

我们添加了vertical-align: middle，它将inline(-block) 元素保持在容器的垂直中间。我们将该 CSS 添加到添加的伪元素和我们的元素（图像）中。

我们通过font-size: 0; 将父级的字体大小设置为零，以便删除内联（-block）元素之间的空白字符。

此方法是跨浏览器和响应式

【参考方案2】：

JSFIDDLE

在您的代码中进行这些更改 - 将表格单元添加到父级，将内联块添加到子级，并且不需要定位。你可以使用合适的宽度。

.pageTitle 
    text-align: center;
    padding: 10px;
    color: #ffffff;
    font-size: large;   
    background: #2281b5;
    display: table-cell;
    width: 1000px;


.backArrow 
    display:inline-block;
    width: 10%;
    float:left;

【参考方案3】：

更改 .backArrow css 属性，改为使用

   .backArrow  
      top: 0;
      width: 29px;
      height:29px;
      float: left;      
    
    .backArrow a 
      width:100%;
      height:100%;
      display: table;
    
    .backArrow a img 
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    

JS 小提琴：http://jsfiddle.net/gjL4z/16/

【讨论】：

这根本不是 OP 想要的，他的意思是垂直居中而不是水平。

这在10px 大小中看起来并不垂直居中。

我认为，问题在于填充

据我所知，他没有给任何元素高度 css