2

I am trying to write my own CSS that emulates the design of this website. Currently I have my screen divided into four sections using this code:

HTML:

  <body>

    <div class="topnav">
    Welcome to TBD
    </div>

    <a href="URL">
    <div class="part1"></div>
    </a>
    <div class="part2"></div>
    <div class="part3"></div>
    <a href="URL">
    <div class="part4"></div>
    </a>


  </body>

CSS:

 html,body 
 {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
  }
.part1 {background-color:#722F37; width:50%; height:50%; float:left}
.part2 {background-color:#FFC987; width:50%; height:50%; float:left}
.part3 {background-color:#f4a460; width:50%; height:50%; float:left}    
.part4 {background-color:#7F171F; width:50%; height:50%; float:left}

I want to place an some text and an image below that text directly in the center of each div I have created. I attempted this, but could only get the text to display at the top of each div, not dead center. How could I do this?

Here is a fiddle of my current layout.

taurus
  • 470
  • 7
  • 22
  • Possible duplicate of [How to center an element horizontally and vertically?](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) – P.S. Jul 29 '17 at 22:46

5 Answers5

0

You can do something like this:

html,body 
 {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
  }
  
.part1 {background-color:#722F37; width:50%; height:50%; float:left; position: relative; }
.part2 {background-color:#FFC987; width:50%; height:50%; float:left; position: relative;}
.part3 {background-color:#f4a460; width:50%; height:50%; float:left; position: relative;}    
.part4 {background-color:#7F171F; width:50%; height:50%; float:left; position: relative;}

.part1 label, .part2 label, .part3 label, .part4 label { 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  margin: 0px auto;
  transform: translateX(-50%); 
}
  <body>

    <div class="topnav">
    Welcome to TBD
    </div>

    <a href="URL">
    <div class="part1">
      <label>I'm centered</label>
    </div>
    </a>
    <div class="part2">
      <label>I'm centered</label>
    </div>
    <div class="part3">
      <label>I'm centered</label>
    </div>
    <a href="URL">
    <div class="part4">
      <label>I'm centered</label>
    </div>
    </a>


  </body>

Also, Read this article, it is exactly about what you are trying to achieve, but in three different ways with code examples https://www.devplayground.net/align-element-vertically-center-using-css/

Talha Abrar
  • 880
  • 8
  • 22
0

You can add a property in each div element like this:

div {
  display: table;
  text-align: center;
  ...
}

And the element that is inside the div assign the following display (for example, if you want to align a h1 that is inside the div element):

h1 {
  display: table-cell;
  vertical-align: middle;
}

This is really helpful when you want to align an element at exactly center (vertical and horizontal). Hope this help.

Your code should look like this:

<body>
  <div class="topnav">
    Welcome to TBD
  </div>
  <a href="URL">
  <div class="part1"><h1>Text</h1></div>
  </a>
  <div class="part2"><h1>Text2</h1></div>
  <div class="part3"><h1>Text3</h1></div>
  <a href="URL">
  <div class="part4"><h1>Text4</h1></div>
  </a>
</body>

And your css file:

html,body 
{
  padding:0;
  margin:0;
  height:100%;
  min-height:100%;
}
.part1 {display: table; text-align: center; background-color:#722F37; width:50%; height:50%; float:left}
.part2 {display: table; text-align: center; background-color:#FFC987; width:50%; height:50%; float:left}
.part3 {display: table; text-align: center; background-color:#f4a460; width:50%; height:50%; float:left}    
.part4 {display: table; text-align: center; background-color:#7F171F; width:50%; height:50%; float:left}
h1 {display: table-cell; vertical-align: middle;}
0

Wrap your content in another div and set the following rules to it:

.innerBlock {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
}

Here is the working jsfiddle: https://jsfiddle.net/c95yyywr/1/

And here is the snippet:

 html,body 
 {
    padding:0;
    margin:0;
    height:100%;
    min-height:100%;
  }
.part1 {background-color:#722F37; width:50%; height:50%; float:left}
.part2 {background-color:#FFC987; width:50%; height:50%; float:left}
.part3 {background-color:#f4a460; width:50%; height:50%; float:left}    
.part4 {background-color:#7F171F; width:50%; height:50%; float:left}

.innerBlock {
  text-align: center;
  position: relative;
  top: 50%;
  transform: translateY(-50%); 
}

p {
  padding: 0;
  margin: 0 0 6px 0;
}

img {
  max-height: 30px;
}
  <body>

    <div class="topnav">
    Welcome to TBD
    </div>

    <a href="URL">
    <div class="part1">
      <div class="innerBlock">
      <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    </a>
    <div class="part2">
      <div class="innerBlock">
        <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    <div class="part3">
      <div class="innerBlock">
        <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    <a href="URL">
    <div class="part4">
      <div class="innerBlock">
        <p>Text</p>
        <img src='https://graphicdesign1aust.files.wordpress.com/2012/03/nikelogo.png'>
      </div>
    </div>
    </a>


  </body>
P.S.
  • 15,970
  • 14
  • 62
  • 86
0

You could use flexbox. Here is your code solved using flexbox: https://jsfiddle.net/r49t61ka/ But I highly recommend you to take a look on this article: A Guide to Flexbox

.part{
  display:flex;
  justify-content: center; //Center the element horizontally
  align-items: center; //Center the element vertically
 }



<a href="URL">
    <div class="part1 part">asd</div>
    </a>
    <div class="part2 part">asd</div>
    <div class="part3 part">asdsd</div>
    <a href="URL">
    <div class="part4 part">asdsdsd</div>
    </a>
jvitoroc
  • 380
  • 1
  • 4
  • 16
-1

I would highly recommend using flexbox for this. You can set each of those div's to be "display: flex", "justify-content: center" and "align-items: center". CSS-Tricks has a great guide for using flexboxes. I swear by them.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Maggie Sadler
  • 1
  • 1