-3

I'm trying to center a div in a div so I tried all the solution in other questions like:

How do you easily horizontally center a <div> using CSS?

How to horizontally center a <div> in another <div>?

But I cannot get it done well. The persons in the grid should always be centered horizontally.

The page is at: http://www.arlande.nl/managers and it is a Drupal site. It is responsive based on the content of 220px. Depending on the number of persons the complete view should be center. So when there are only 2 persons in the row the complete row should be centered and if there are 3 persons in the row it should also be centered.

Any suggestion which CSS I should apply? Outer box div is view-id-smoelenboek Responsive css is on div view-content-wrapper

Community
  • 1
  • 1
Justme
  • 211
  • 2
  • 9
  • Kindly provide relevant codes with your question please. – AndrewL64 Apr 21 '16 at 16:36
  • 1
    Congraulations: You have won the grand prize for the 1000th question on how to center something in CSS. –  Apr 21 '16 at 16:44
  • "...1000th question on how to center something..." well, sort of. This is more of a responsive design question than a simple centering issue. – ericgilchrist Apr 21 '16 at 18:25

3 Answers3

1

// CSS

.centerBlock {
     display: table;
    margin: auto
}

HTML

<div class="centerBlock">
      something
</div>
Ahmad Sharif
  • 4,141
  • 5
  • 37
  • 49
1

Your question does not seem to fit your actual issue. Looking at your description and your web page, I understand your question as follows: "How do I keep a grid-type-arrangement of floating div elements centered in their container at various screen widths?"

Well, here you go. And here is the jsfiddle. 

#container {
  width:320px;
  margin:auto;  
  background-color:tan;   
  padding:40px;
  box-sizing:border-box;
}

.circle {
  float:left;
  background-color:blue;
  margin:20px;
  height:200px;
  width:200px;
  border-radius:50%;      
}

.clearFix {
  clear:both;
}

@media(min-width:560px) {
  #container {
    width:560px;
  }
}

@media(min-width:800px) {
  #container {
    width:800px;
  }
}

@media(min-width:1040px) {
  #container {
    width:1040px;
  }
}
<div id="container">
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="clearFix"></div>
</div>

This answer is not an exact representation of your code structure (you have some column classes), but you should be able to apply it to your code without too much trouble. The behavior of the "circles" mimics the behavior of the elements you have on your page, but centered. The key here is to use media queries to redefine the width value of the container at various screen widths.

ericgilchrist
  • 262
  • 4
  • 10
  • Thank you so much, this solution worked, it cost me a lot of time because you have to set the width instead of percetage. Really really nice. thxs – Justme May 01 '16 at 21:59
0

Your style is messing it up. Can you use media queries? On certain devices that width is ok but not at others. Media queries should solve it.

.view-id-smoelenboek .views-column {
    float: left;
    width: 220px;
Rachel S
  • 3,780
  • 3
  • 24
  • 37