CSS выравнивание текста на элементе inline-block

Question

У меня есть такая структура:

<div class="father">
 This string is left-aligned
 <div class="divToCenter" style="display:inline-block;">
  //contains other divs.I used inline block for making this div as large as 
  //content ATTENTION: its width is not fixed! 
 </div>

</div>

Как я мог сказать:

Позвольте мне иметь ТОЛЬКО класс с именем "divToCenter" с центром в "отце" div.

Спасибо

Лука

Answer 1

#left {
  float: left;
   background: #eee;
   width: 200px; /* width is optional */
}
#content {
  overflow: hidden;
  text-align: center;
}

    <div class="father">
     <div id="left">This string is left-aligned</div>
     <div id="content">
      <!-- contains other divs.I used inline block for making this div as large as content -->
     </div>
    </div>

Плавающая выровненная по левому краю строка или блок влево, затем при overflow:hidden на содержимом она автоматически займет оставшееся место, и вы можете text-align это так, как вы хотите.

Либо это, либо конвертируйте левый контент во встроенный блок, чтобы он и контент располагались рядом, и вы сможете text-align каждый inline-block отдельно.

Answer 2

div.divToCenter
{
margin: 0 auto;
}

Answer 3

.father { text-align: center; }
.father div.divToCenter { margin: 0 auto; }

Обновление:

.father { text-align: left; }
.father div.divToCenter { width:Xpx; margin: 0 auto; }