如何将文字和图片垂直居中对齐

Question

我正在尝试将文字与图片垂直居中对齐。 当前，文本看起来像在图像底部对齐。

这是我的jsfiddle： http : //jsfiddle.net/hus​​kydawgs/L5Le0w37/7/

这是我的HTML：

    <div class="column-resources-box">
    <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a>

<h4 class="title-bar">Apple<br>
    Center</h4>

<ul>
    <li>Gala</li>
    <li>Pink Lady</li>
    <li>Fuji</li>
</ul>
</div>

Here's my CSS:

        .column-resources-box {
        width: 200px;
        float: left;
        margin: 15px;
    }

        .column-resources-box img {
    margin:0 2%;
    float:left;
    height:50px;
    width:50px;
}
        }

h4.title-bar {
    color: #2251a4;
    background: none;
    font-family: 'Arial', inherit;
    font-weight: normal;
    text-transform: none;
    line-height: normal;
    margin: 0;
    padding: 0;
    text-align: left;
}

Answer 1

试试看 我包装了两个要在div中居中的项目，然后将图像居中。

 .wrap { display:inline } .apple_image { vertical-align:middle } .column-resources-box { width: 200px; float: left; margin: 15px; } .column-resources-box img { margin:0 2%; float:left; height:50px; width:50px; } } h4.title-bar { color: #2251a4; background: none; font-family: 'Arial', inherit; font-weight: normal; text-transform: none; line-height: normal; margin: 0 0 0 0; padding: 0; text-align: left; } 

 <div class="column-resources-box"> <div class="wrap"> <a class="apple_image" href="http://en.wikipedia.org/wiki/Apple"> <img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /> </a> <h4 class="title-bar">AppleCenter</h4> </div> <ul> <li>Gala</li> <li>Pink Lady</li> <li>Fuji</li> </ul> </div> 

Answer 2

CSS中存在语法错误。 这是您的CSS，摘自顶部：

        .column-resources-box {
        width: 200px;
        float: left;
        margin: 15px;
    }

        .column-resources-box img {
    margin:0 2%;
    float:left;
    height:50px;
    width:50px;
}
        }

注意无关紧要的括号。 这似乎阻止了浏览器访问其余的CSS。

固定： http : //jsfiddle.net/L5Le0w37/13/

您可以将其向下移动一点以使其与position:relative; top:7px;居中position:relative; top:7px; position:relative; top:7px; ：

居中： http : //jsfiddle.net/L5Le0w37/16/

Answer 3

您可以使用绝对定位将事物准确放置在所需的位置。

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

  .column-resources-box { width: 200px; float: left; margin: 15px; position: relative; } .column-resources-box img { margin:0 2%; height:50px; width:50px; position: absolute; } h4.title-bar { color: #2251a4; background: none; font-family:'Arial', inherit; font-weight: normal; text-transform: none; line-height: normal; margin: 0 0 0 0; padding: 0; text-align: left; position: absolute; top: 10px; left: 60px; } .column-resources-box ul { margin:60px 2%; height:50px; width:70px; position: absolute; } 

 <div class="column-resources-box"> <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a> <h4 class="title-bar">Apple<br> Center</h4> <ul> <li>Gala</li> <li>Pink Lady</li> <li>Fuji</li> </ul> </div> 

Answer 4

我稍微重写了您的代码，但这是使用顶部填充的另一种可能方式。

vertical-align: top;
padding: 4px 0px 0px 0px; /* adjust top padding */

http://jsfiddle.net/Hastig/mj5yzsr7/3/

您可以调整与苹果和中心之间的间距h4.title-bar { line-height: 25px; } h4.title-bar { line-height: 25px; }然后调整顶部填充以进行补偿。

Answer 5

将您的文本和图像包装在div内，并设置其样式，如下所示：

HTML

<div class="appleWrapper">
    <a href="http://en.wikipedia.org/wiki/Apple"><img alt="Apples" height="50" src="http://www.clipartbest.com/cliparts/acq/ezj/acqezjKcM.jpeg" width="50" /></a>
    <h4 class="title-bar">Apple<br>Center</h4>
</div>

CSS

.appleWrapper {
    height: 50px;
}
.title-bar {
    margin: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

在此处查看在线示例