Вставка максимальной ширины и выравнивания текста в середине родителя

Question

В одной из моих строк я хотел бы поместить максимальную ширину и центрировать мой текст внутри этого div.

Моего домашняя страница текст в настоящее время выглядит следующим образом::

Я хотел бы поставить максимальную ширину и отцентрировать текст в этой одной секции.

Идеальный результат:

CSS

.homepage-text { 
    font-size: 130%; 
} 

.light-section { 
     background-color: lightblue; 
    /* color: white; */ 
     text-align: center: 
    } 

HTML

 <div class="row light-section"> 
     <div class="col-sm-12"> 
    <div class="col-sm-12 homepage-text"> 

<p>Text sit's here</p> 
</div></div></div> 

Живая Ссылка:http://185.123.97.138/~kidsdrum/moneynest.co.uk/

Answer 1

Может быть, я не понял, что именно вы имели в виду, но попробуйте это:

.homepage-text { 
    font-size: 130%; 
    max-width: 1000px; 
    margin: 0 auto; 
    float: none; 
} 

Answer 2

Попробуйте этот код:

.homepage-text { 
    font-size: 130%; 
    width: 960px; 
    margin: auto; 
    float: none; 
} 

Я установил a фиксированный width от 960px вместо жидкости width от 100% и центр этого контейнера с margin: auto; Кроме того, вы должны отключить свойство float, чтобы сделать работу margin: auto;.

Answer 3

Wrap содержание в фиксированном width или увеличившихся ширина max-width DIV, а затем сделать его float:none; и установите правое и левое поля auto !important

<div class="row light-section"> 
<div class="col-sm-12"> 
<div class="col-sm-12 homepage-text" style="width: 400px; float: none;margin: 0 auto !important;"> 

<p>Text sit's here</p> 
</div> 
</div> 
</div> 

Answer 4

Вы также можете осуществить это с помощью динамического запаса & ширины значения, без изменения поплавка, ни с помощью margin: 0 auto; (Если вы хотите использовать этот запас, вам придется использовать float: none; в противном случае, он не будет автоматически центрировать стартовую страницу текста.)

.homepage-text { 
    font-size: 130%; 
    margin: 0 25% 0 25%; // Same as margin: 0 25%; but it illustrates 25+25+50=100% 
    width: 50%; 
} 

Answer 5

Bootstrap уже выполнил эту работу за вас. Все, что вам нужно установить, это максимальная ширина класса контейнера. Это помогает поддерживать согласованность в макете страницы. Here is the fiddle.

.container { 
 
    max-width:700px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="container"> 
 
    <p>Text sit's here</p> 
 
    </div> 
 
</div>