html - 将容器内的内容居中

Question

您好，我想将容器内的内容正确居中，但我不知道该怎么做。我试过 text-align : center。

我该怎么做？

HTML

<div id="Contacts" data-bind="foreach: viewModel.contacts()">
    <div class="title">
        <div class="container">
            &nbsp; <small> <span class="red"> NEW CONTACT</span> </small>
            <a href="#" data-bind="text: $data.Title()"></a> <br>
            &nbsp; <a href="#" data-bind="text: $data.Title()"></a> <br>
        </div>
    </div>
</div>

CSS

.container {
    width: 940px;
    margin-left: auto;
    margin-right: auto;
    zoom: 1;
}


.title {
    width: 540px;
    height : 30px;
    margin-bottom: 10px;
    background-color: #F9F7F7;
    border: 1px solid #e4e4e4;
    position: absolute;
}

没有居中

我想要的居中版本(近似值):

Answer 1

将 line-height:30px; 添加到 .title class。

   .container {
        width: 940px;
        margin-left: auto;
        margin-right: auto;
        zoom: 1;
    }


    .title {
        width: 540px;
        height : 30px;
        line-height : 30px;
        margin-bottom: 10px;
        background-color: #F9F7F7;
        border: 1px solid #e4e4e4;
        position: absolute;
    }

Jsfiddle:http://jsfiddle.net//vU73t/