CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Sam Jefferies
Sam Jefferies

Reputation: 594

Putting a max-width and aligning text in the middle of parent

In one of my row's I'd like to put a max width and center my text within that div.

My homepage text currently looks like::

Current

I'd like to put a max width and center the text within this one section.

Ideal outcome:

Desired outcome

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>

Live Link: http://185.123.97.138/~kidsdrum/moneynest.co.uk/

Upvotes: 2

Views: 3007

Answers (5)

Binod Gurung
Binod Gurung

Reputation: 453

Bootstrap has already done that job for you. All you need to set is the max-width of the container class. Doing so helps to maintain consistency in the page layout. 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>

Upvotes: 0

Clomp
Clomp

Reputation: 3308

You could also pull this off using dynamic margin & width values, without altering the float nor using margin: 0 auto; (If you want to use that margin, you will have to use float: none; Otherwise, it won't automatically center the homepage-text.)

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

Upvotes: 0

Khaled Awad
Khaled Awad

Reputation: 1834

Wrap the content in a fixed width or a maxed width max-width div, then make it float:none; and set the right and left margins 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>

Upvotes: 0

Nutshell
Nutshell

Reputation: 8537

Try this code : 

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

I've set a fixed width of 960px instead of a fluid width of 100% and center this container with margin: auto; Also, you have to unset the float property to make the margin: auto; works.

Upvotes: 0

lomboboo
lomboboo

Reputation: 1233

Maybe I didn't understand exactly what did you mean, but try this:

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

Upvotes: 3

Related Questions