Semantic Basic Template
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<div class="ui stackable three column grid" id="sui-override">
<div class="column">
<div class="ui center aligned segment">
<div class="ui small image">
<img src="http://placehold.it/200" alt="" />
</div><!-- image -->
<h2 class="ui center aligned header"><i class="code icon"></i></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate lacus vitae malesuada porttitor. Vivamus commodo eleifend faucibus. Vestibulum a quam aliquam, euismod tellus eget, malesuada tellus.
</p>
</div><!-- segment -->
</div><!-- column 1 -->
<div class="column">
<div class="ui center aligned segment">
<div class="ui small image">
<img src="http://placehold.it/200" alt="" />
</div><!-- image -->
<h2 class="ui center aligned header"><i class="cloud icon"></i></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate lacus vitae malesuada porttitor. Vivamus commodo eleifend faucibus. Vestibulum a quam aliquam, euismod tellus eget, malesuada tellus.
</p>
</div><!-- segment -->
</div><!-- column 2 -->
<div class="column">
<div class="ui center aligned segment">
<div class="ui small image">
<img src="http://placehold.it/200x100" alt="" />
</div><!-- image -->
<h2 class="ui center aligned header"><i class="hashtag icon"></i></h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vulputate lacus vitae malesuada porttitor. Vivamus commodo eleifend faucibus. Vestibulum a quam aliquam, euismod tellus eget, malesuada tellus.
</p>
</div><!-- segment -->
</div><!-- column 3 -->
</div>
CSS
body {
width: 80%;
margin: 0 auto;
}
p {
text-align: justify;
}
#sui-override .ui.small.image {
height: 200px; /*Max Possible Height of the image */
}
#sui-override .ui.small.image > img {
position: absolute;
max-height: 100%;
max-width: 100%;
width: auto;
height: auto;
top: 0; /*Centering the image*/
bottom: 0; /*Centering the image*/
left: 0; /*Centering the image*/
right: 0; /*Centering the image*/
margin: auto;
}