DEMO: How to Vertically Align Middle with CSS

HTML

Copy the code below and paste into your HTML document.

<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
</div>
</div>
<div class="div-outer">
    <div class="div-inner">
    <h4>Box One</h4>
    <p>Vertical Align Center</p>
    </div>
</div>

You can tweak around with different colors of the boxes or texts. Have fun!

CSS

Copy the code below and paste into your CSS document. You need to make the same min-height and line-height on the outer part of the div. In my case, I have 200px.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

In case if this css isn’t working, you can try as below.

.div-outer {
    height: 80vh;
    position: relative;
}
.div-inner {margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

You can tweak around with different colors of the boxes or texts. Have fun!

The post CSS Vertical Align Center first appeared on identity design.

The post CSS Vertical Align Center appeared first on identity design.

DEMO: How It Looks

CSS

Copy the code below and paste into your CSS document.

table tr td { padding:20px }
table td:nth-child(1) { width:35%; }
table td:nth-child(2) { width:15%; }
table td:nth-child(3) { width:5%; }
table td:nth-child(4) { width:35%; }
table td:nth-child(5) { width:10%; }

HTML

Copy the code below and paste into your HTML document.

<table class="table" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>35%</td>
    <td>15%</td>
    <td>5%</td>
    <td>35%</td>
    <td>10%</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
    <td>D</td>
    <td>E</td>
  </tr>
</table>

You can copy both CSS and HTML codes to your file and tweak around as you like!

The post CSS: A Simple Way to Set the Table Column Width first appeared on identity design.

The post CSS: A Simple Way to Set the Table Column Width appeared first on identity design.

You can make a circle around your Ordered List, <ol> as below without using image formats like JPG or PNG, so this way you can reduce the developing and loading time for your site.

DEMO: How It Looks

CSS

Copy the code below and paste into your CSS document.

ol {
    counter-reset:item; 
    margin:0; 
    padding-left:0; 
}
ol>li {
    counter-increment:item; 
    list-style:none inside; 
    margin: 40px 0;
    overflow: hidden;
    font-size: 16px !important;
    line-height: 1.3;
}
ol>li:before {
    content:counter(item) ;
    margin-right: 20px;
    padding: 8px;
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 65px;
    background: #fe862c;
    color: #fff;
    text-align: center; 
    font: 56px 'Lato', Helvetica, Arial, sans-serif;
    font-weight: 100;
    float: left;
}

HTML

Copy the code below and paste into your HTML document.

<ol>

    <li>Lorem ipsum dolor sit amet, felis dui nam, vivamus turpis bibendum et massa.</li>

    <li>At augue, erat dui odio. Duis lectus, laoreet et, dolor nascetur tellus tellus sit etiam, massa leo dolor. Magna mi vitae et, lectus pellentesque, nec magna et ante, vehicula torquent venenatis tempor eget, elementum condimentum. </li>

    <li>Integer porttitor donec, justo in, in pede, et leo ornare viverra erat ac. Dui diam, a sed purus, porta penatibus. Magna in, congue quam pulvinar cras malesuada condimentum nunc, vestibulum ut dolor tortor fusce nibh sollicitudin.</li>

    <li>Vitae in, a pulvinar velit laoreet, tristique nascetur sapien. Placerat nunc a integer tincidunt sem, vivamus turpis, erat pulvinar interdum rhoncus nonummy vitae, etiam eleifend arcu non cras a commodo.</li>

    <li>Quis mus donec, volutpat placerat nam et eros quam enim, id tincidunt aliquam libero odio, suspendisse a quam tristique ligula.</li>

</ol>

You can copy both CSS and HTML codes to your file and tweak around as you like. Enjoy coding!

CSS Only: Pop-up Modal Lightbox on Page Load

How Create a HTML/CSS Ribbon. Simple and Light (None Jpg/Png Image)

CSS: Add Gradient (Dark Shade) Layer on Background Images to Make the Text Visible

The post Circled Number Lists (HTML/CSS) first appeared on identity design.

The post Circled Number Lists (HTML/CSS) appeared first on identity design.

Here’s the parallax website with “SMOOTH” scrolling effect for you to download. The website is made of HTML5/CSS/JavaScript. It’s free to use for your website, but it only works on Google Chrome. For other browsers everything works perfectly except for the smooth scrolling effect.

The post Download: Simple Parallax Smooth Scrolling Website Template first appeared on identity design.

The post Download: Simple Parallax Smooth Scrolling Website Template appeared first on identity design.