CSS使文本居中

Question

这是我的HTML

<div class="logoArea">
            <img  src="images/oifcoman-logo.jpg"/>
            <div class="titleClass">Call Center Dashboard</div>
        </div>

这是我的CSS

.logoArea {
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}

.titleClass {
    color: #343434;
    font-weight: normal;
    font-family: 'Ultra', sans-serif;
    font-size: 36px;
    line-height: 42px;
    text-transform: uppercase;
    text-shadow: 0 2px white, 0 3px #777;
    margin:auto;
    background-color:red;
    width:40%;
    top:10px;
}

结果是这样的：

我希望是这样的：

Answer 1

解决此问题的方法很少。 这是对现有样式进行最小更改的一种。

.logoArea img {
    float: left;
}

通常，它需要对代码进行其他更改才能在父窗口中实际居中，但这似乎与您已经拥有的其他样式很好地结合在一起。

编辑

再看结果，我有第二个想法。 我的解决方案仅适用于非动态元素（不会动态变化但保持不变的元素）。 由于它似乎是标题，因此是一个相对静态的元素，所以我的解决方案可能仍然有效，仅在中心div上添加所需的padding-top 。 我不知道多少，因为在您的示例中，您使用了非常大的字体，而我不知道图像的大小。

Answer 2

将图片设置为float:left; 文本display:inline-block; 和.logoArea text-align:center; 。

工作提琴

Answer 3

尝试使用：

<div class="logoArea" style="display:table-cell; vertical-align:middle">
            <img  src="images/oifcoman-logo.jpg"/>
            <div class="titleClass">Call Center Dashboard</div>
        </div>

Answer 4

如果元素是td（不是div），则可以使用CSS vertical-align：middle或尝试以下技巧：http: //zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 5

试试这个：HTML：

<div class="logoArea">
            <img  src="http://i.stack.imgur.com/O3d6S.jpg?s=128&g=1"/>
            <div class="titleClass">Call Center Dashboard</div>
    <div style='clear:both;'></div>        </div>

CSS：

.logoArea {
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
}
.logoArea img {display:block;width:100px;height:100px;float:left;}
.logoArea .titleClass {float:left;}

JavaScript（必须先包含jQuery）

$(document).ready(function(){
   var h=$('.logoArea').height();var ch=$('.logoArea .titleClass').height();
    var pTop=((h-ch)/2)+'px';
    $('.logoArea .titleClass').css('paddingTop',pTop);
});

演示： http ： //jsfiddle.net/zcAjq/