CSS текст-выравнивание по элементу встроенного блока

#html #css #text-align

#HTML #css #выравнивание текста

Вопрос:

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

 <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.

Спасибо

Luca

1. Divs всегда растягиваются, чтобы вместить их содержимое, в пределах их прямого родителя. Нет необходимости в display:inline-block;

2. родительский div больше, и его ширина фиксирована, поэтому divToCenter имеет тенденцию расширяться до ширины своего отца

Ответ №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 по отдельности.

1. да, спасибо! Я также сохранил решение «перенос содержимого с выравниванием по левому краю» в качестве последнего ресурса.. Я думал, что должен быть css-селектор для использования моей собственной структуры без дальнейших изменений, но, думаю, я ошибался =)

2. Я вижу пример скрипки, который вы сейчас оставили в комментарии к другому ответу, и да, я думаю, что перенос выравнивания по левому краю был бы лучшим ответом — jsfiddle.net/clairesuzy/ea47e/6 — вы не можете настроить таргетинг на часть «текстового узла» родительского div любым другим способом

Ответ №2:

 div.divToCenter
{
margin: 0 auto;
}

1. вам нужно, чтобы текст внутри div был центрирован, как text align, или вы хотите, чтобы сам div был центрирован? Это две разные вещи!

2. Я хочу, чтобы div располагался по центру.. (кстати, div — это фактический размер его content..so содержимое не может быть выровнено)

3. @JAA149 Я также пробовал ваш совет раньше, но он не работает.. Я добавил «!важно», чтобы убедиться, что переопределения не происходит.. Если я применю свойство «выравнивание текста» к родительскому элементу div, у меня будет весь текст (включая divToCenter) по центру.. но я просто хочу, чтобы div находился по центру

4. чтобы использовать margin:0 auto, вам также нужно будет определить ширину div.

Ответ №3:

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

Обновить:

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

1. как я писал выше, если я применю свойство «выравнивание текста» к родительскому элементу div, у меня весь текст (включая divToCenter) будет центрирован.. но я просто хочу, чтобы div находился по центру..

2. Я обновил свой пост, надеясь удовлетворить ваши требования, просто установите свойство width внутреннего div, чтобы убедиться, что активировано автоматическое поле.

3. Ширина divToCenter является динамической .. не фиксированной .. спасибо! Я думаю, я буду использовать решение «перенос левого содержимого»