css控制div中元素居中的示例

```css

treeTitle {

background: url(../images/bj.png);

height: 30px;

color: white;

text-align: center; / 设置整个div的文本居中 /

line-height: 30px; / 设置行高，使内容垂直居中 /

}

treeTitle img {

vertical-align: middle; / 设置图片垂直居中对齐 /

}

```

对于行内元素来说，它们会在文本行内排列，形成一个行内框。这个框虽然看不见摸不着，但它确实存在。在没有其他因素影响的情况下，行内框的高度等于内容区域的高度。我们可以通过设置行高来调整这个行内框的高度。具体到我们的例子，设置合适的行高可以使得图片和文字在垂直方向上居中。垂直对齐方式可以通过`vertical-align`属性来调整。默认情况下，图片和文字的垂直对齐方式是基线对齐，所以我们需要通过代码调整图片到中间位置。关于`line-height`的详细解释，有一篇很好的博客进行了深入的。阅读后会有更深刻的理解。通过调整这些CSS属性，我们可以实现图片和文字的居中显示。对于复杂布局的需求，这可能只是开始。让我们不断CSS的奥秘，创造出更美观的界面设计！