Clever Geek Handbook

How do I center two square boxes on a page?

I have a page where I am showing the status of two websites - as if they are currently running or not. If the site is up, I want the block to have a light green background, and if not, a light red background. And the site name should be centered inside the block.

This is what I have tried so far:

    body {
      font-family: sans-serif;
    }
    #container {
      width: 800px;
      height: 600px;
      margin: 0 auto;
      border: 1px solid #ccc;
    }
    #smallcontainer {
      width: 208px;
      height: 100px;
      margin: 200px auto auto;
    }
    .status {
      height: 100px;
      width: 100px;
      background: #efefef;
      float: left;
      margin-left: 2px;
      border: 1px solid #ccc;
    }
      

        
        
        
      

    
<div id="container">
  <div id="smallcontainer">
    <div class="status"></div>
    <div class="status"></div>
  </div>
</div>
Run codeHide result


It works (see full screen output ), but I feel like I'm leaving. How can I do something as simple as this using CSS the right way? I feel like my code is hacked. And how would you write the text exactly in the center of the block, vertically and horizontally?

And can it be used in such a way that it works on all desktop screen sizes? Maybe I should specify the width and height in percentages rather than pixels?

+3


source to share


5 answers


You can use flexbox

.support

Html

<div id="container">
    <div class="status"></div>
    <div class="status"></div>
</div>


CSS

#container {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status {
    height: 100px;
    width: 100px;
    background: #efefef;
    margin-left: 2px;
    border: 1px solid #ccc;
}

http://jsfiddle.net/b9n3h1en/

+3


source


Try Fiddle , vertically and horizontally aligned text in the center of the div.



body {
        font-family: sans-serif;
    }
    #container {
        width: 800px;
        height: 600px;
        margin: 0 auto;
        border: 1px  solid #ccc;
    }
    #smallcontainer {
        width: 208px;
        height: 100px;
        text-align: center;
        margin: 200px auto auto;
    }
    .status {
        height: 100px;
        width: 100px;
        background: #efefef;
        float: left;
        margin-left: 2px;
        border: 1px solid #ccc;
        line-height: 100px;
    }
0


source


Try jsfiddle

body {
      font-family: sans-serif;
    }
    #container {
      width: 100%;
      height: 400px;

      margin: 0 auto;
      border: 1px solid #ccc;
    position:relative;
    }
    #smallcontainer {
      width: 208px;
      height: 100px;
      position:absolute;
      left:50%;
      top:50%;
      margin-left:-100px;
      margin-top:-50px;
    }
    .status {
        height: 100px;
        width: 100px;
        background: #efefef;
        float: left;
        margin-left: 2px;
        border: 1px solid #ccc;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
        -webkit-box-align: center;

        display: -moz-box;
        -moz-box-orient: vertical;
        -moz-box-pack: center;
        -moz-box-align: center;

        display: box;
        box-orient: vertical;
        box-pack: center;
        box-align: center; 
        text-align:center;
    }

Also see more about "display: flexbox" https://developer.mozilla.org/en-US/docs/Web/CSS/display

0


source


This is how I would do it:

HTML:

<div id="container">
    <div id="smallcontainer">
        <div class="status">
            <div class="border">
                <div class="txt">Text Here</div>
            </div>
        </div>
        <div class="status">
            <div class="border">
                <div class="txt">More Text Here</div>
            </div>
        </div>
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
}
#container {
    width: 95%;
    height: 400px;
    margin: 0 auto;
    border: 1px solid #ccc;
    position: relative;
}
#smallcontainer {
    width: 208px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.status {
    height: 100%;
    width: 50%;
    float: left;
    text-align: center;
    padding: 2px;
}
.border {
    background: #efefef;
    border: 1px solid #ccc;
    width: 100%;
    height: 100%;
    position: relative;
}
.txt {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

See the fiddle here: http://jsfiddle.net/bootsified/kf7Lbq24/

0


source


You can add negative margins to each div

one you want to place exactly in the center. Note that for this to work, the width and height must be in pixels.

body {
  font-family: sans-serif;
}
#container {
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -400px;
  margin-top: -300px;
}
#smallcontainer {
  width: 208px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -104px;
  margin-top: -50px;
}
.status {
  height: 100px;
  width: 100px;
  background: #efefef;
  float: left;
  margin-left: 2px;
  border: 1px solid #ccc;
}
      

        
        
        
      

    
<div id="container">
  <div id="smallcontainer">
    <div class="status"></div>
    <div class="status"></div>
  </div>
</div>
Run codeHide result


0


source






More articles:


All Articles