center vertical & horizontal

center-vertical-horizontal.markdown

center vertical & horizontal

A Pen by b3n on CodePen.

License.

index.html

<div class="nav">
  <div class="logo">
    <a href="#">randomQuotes</a>
  </div>
  <a href="#">about</a>
  <a href="#">submit quote</a>
</div>
<div class="container">
  <div class="div_mainbody">
    <div class="div_text">
      <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Ev</p>
      <p>J. R. R. Tolkien</p>
    </div>
    <div class="div_button">
      <a class="next">next</a>
      <a class="sharefb">sharefb</a>
      <a class="sharetw">sharetw</a>
    </div>
  </div>
</div>

script.js

/*
https://stackoverflow.com/questions/9120539/facebook-share-link-no-javascript
*/

style.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: helvetica neue, Helvetica, Arial, sans-serif;
}

.container {
  position: relative;
  /*
  media-query
  width: 620px;
  margin: 0 auto;
  */
}

.div_mainbody {
  max-height: 640px;
  width: 320px;
  margin: 0 auto;
  background: #fff;
  color: #111;
  border: 1px solid #ccc;
  border-radius: 5px;
  border-color: #f0f0f0 #ececec #dfdfdf;
  box-shadow: 0 1px 3px #ccc;
}

.div_text {
  height: 80%;
  padding: 15px;
}
.div_text p {
}
.div_text p:first-child {
  line-height: 1.4;
  font-size: 20px;
  font-weight: 300 !important;
}
.div_text p:last-child {
  color: #00a;
  padding-top: 10px;
  text-align: right;
  font-size: 16px;
  font-weight: 700 !important;
}
.div_text p:last-child:before {
  content: "- ";
}

.div_button {
  background-color: #f9f9f9;
  text-align: center;
  border-top: 1px solid #e0e0e0;
  padding: 5px 10px;
  overflow: hidden;
}

.div_button a:hover {
  background-color: #fff;
  color: #111;
  cursor: pointer;
}

.div_button a.next {
  background-color: #2f7fca;
  color: #fff;
  float: left;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 10px;
}

.div_button a.sharefb,
.div_button a.sharetw {
  float: right;
  margin-left: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 10px;
}