CODEWITHSUNDEEP
css
funnyfish
funnyfish

Reputation: 143

How to center DIVs as the browser window is scaled

jsfiddle: https://jsfiddle.net/hfnmspwa/3/

I have floating DIVs with text in that resize as browser window resized. This is working however I cannot get these text boxes to center in the middle of the page. There is no float center! Please see the jsfiddle for further info - I have put some further notes in the JS quadrant.

.infos_div {
  background-color: #FFF;
}

.infos_div::after {
  content: "";
  clear: both;
  display: table;
}

.infos_container_div {
  background-color: #9FC;
  display: inline-block;
}

.info_div {
  display: inline-block;
  cursor: pointer;
  float: left;
  text-align: center;
  width: auto;
  height: auto;
  min-height: 80px;
  max-width: 30%;
  min-width: 200px;
  padding: 10px;
  margin: 10px;
  z-index: 1;
  background-color: #FFF;
  white-space: normal;
}
<div class="infos_div">
  <div class="infos_container_div">
    <div class="info_div">
      <strong>Feature 1</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 2</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 3</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 4</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div" o>
      <strong>Feature 5</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>SFeature 6</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 37

Answers (3)

user7148391
user7148391

Reputation:

You can use grids, if you necessarily need the 3 paragraphs to be centered.

* {
  margin: 0;
  padding: 0;
}

.infos_div {
  background-color: #FFF;
}

.infos_div::after {
  content: "";
  clear: both;
  display: table;
}

.infos_container_div {
  background-color: #9FC;
  display: grid;
  grid-template-areas: ". . .";
  text-align: center;
  grid-gap: 10px;
  padding: 10px;
}

.info_div {
  display: inline-block;
  cursor: pointer;
  text-align: center;
  width: auto;
  height: auto;
  padding: 10px;
  z-index: 1;
  background-color: #FFF;
  white-space: normal;
}
<div class="infos_div">
  <div class="infos_container_div">
    <div class="info_div">
      <strong>Feature 1</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 2</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 3</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>Feature 4</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div" o>
      <strong>Feature 5</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
    <div class="info_div">
      <strong>SFeature 6</strong>
      <div class="info_text">blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah, blah blah blah</div>
    </div>
  </div>
</div>

Upvotes: 0

Merrill Cook
Merrill Cook

Reputation: 1208

If you take the 

float:left;

Off of .info-div they should center.

Upvotes: 0

Thomas Cohn
Thomas Cohn

Reputation: 497

You could give the parent element center text alignment and remove the float.

So add text-align: center; to .infos_container_div and remove float: left; from .info_div.

https://jsfiddle.net/hfnmspwa/4/

Upvotes: 2

Related Questions