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;。

<强> Working fiddle

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/