文本垂直对齐是两行还是一行

时间:2015-03-04 21:36:43

标签: css vertical-alignment

实际上我试图将文本垂直对齐。

请在下面找到图片![



.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>
&#13;
&#13;
&#13;

] 1

请提前帮助..先谢谢。 :)

1 个答案:

答案 0 :(得分:0)

删除.factorsBox .factorHeading h2

上的浮动

并添加:

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