Rahimuddin
Rahimuddin

Reputation: 614

text vertical align whether it is two lines or one line

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

Answers (1)

jlowcs
jlowcs

Reputation: 1933

Remove the float on .factorsBox .factorHeading h2

And add this:

.factorsBox .factorHeading span {
    vertical-align: middle;
}

Upvotes: 1

Related Questions