Reputation: 614
Actually I am trying to align the text vertically middle.
Please find below image![
.factorsContent li {
list-style-type:none;
width:30%;
margin:0px 15px;
float:left;
}
/* 10 FACTORS BOX */
.factorsBox {
width:100%;
height:290px;
background:#f4f4f4;
border:4px solid #f4f4f4;
margin-bottom:20px;
}
.downloadPdfImg { float:right; margin:40px 0 0 0; }
.factorsBox .factorHeading {
padding:10px;
background:#fff;
}
.factorsBox .factorHeading h2 {
color:#88042c;
font-size:20px;
font-weight:600;
float:left;
margin:0;
width:80%;
}
.factorsBox .factorHeading span {
font-size:36px;
color:#999999;
text-align:center;
font-weight:600;
float:left;
height:45px;
padding:2px 15px;
border:0px solid blue;
}
.factorsBox .factorHeading .factorsIco {
float:right;
border:0px solid red;
margin:0;
}
.factorsBox p{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:18px;
color:#666666;
padding:15px;
text-align:justify;
margin:0px;
}
<div class="factorsContent">
<ul>
<li>
<div class="factorsBox">
<div class="factorHeading">
<h2><span>1</span> Know Your<br />Market</h2>
<img src="img/icon-factors-1.png" class="img-responsive factorsIco" />
<div class="clearfix"></div>
</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</li>
<li>
<div class="factorsBox">
<div class="factorHeading">
<h2><span>1</span> Know Your<br />Market</h2>
<img src="img/icon-factors-1.png" class="img-responsive factorsIco" />
<div class="clearfix"></div>
</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</li>
<li>
<div class="factorsBox">
<div class="factorHeading">
<h2><span>1</span> Finance</h2>
<img src="img/icon-factors-1.png" class="img-responsive factorsIco" />
<div class="clearfix"></div>
</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</li>
</ul>
</div>
]1
Please help.. thanks in advance. :)
Upvotes: 0
Views: 823
Reputation: 1933
Remove the float on .factorsBox .factorHeading h2
And add this:
.factorsBox .factorHeading span {
vertical-align: middle;
}
Upvotes: 1