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/

Answer 2

これは修正された css と HTML で、Fiddle リンクがあります。

HTML

<div id="Contacts">
    <div class="container">
        <div class="title">
            <a href="#" data-bind="text: $data.Title()">Demo Text goes here</a> <br>
        </div>
    </div>
</div>

CSS

*{
    padding:0;
    margin:0;
    }

.container {
    width: 940px;
    margin:0 auto;
    zoom: 1;
    background-color:#ffb7b7;
    padding:20px;
    text-align:center;
}


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

Answer 3

.centerMe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  /* dimensions */
}