html - 第三行文本居中

Question

我基本上有三行文本，左边是文本，右边是图像，出于某种原因，使用相同的代码，第三行居中。

ul.project-category{text-align:center; margin-bottom:40px;}
ul.project-category li{display:inline-block; padding:2px 5px;}
ul.project-category li a{float:left; padding:5px 20px; border:solid 1px #222; color:#222; text-transform:uppercase;  transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
ul.project-category li a:hover, ul.project-category li a.active{background:#222; color:#fff;}
.grid-item {margin-bottom:30px;}
.grid-item img{width:100%;}
.portfolio-hover{position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.9); text-align:center;  opacity:0;   transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.grid-item:hover .portfolio-hover{opacity:1;}
.portfolio-hover-content {-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; position:absolute; width:100%; padding:15px; margin-top: -25px; transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out;-o-transition: all 0.35s ease-out;-webkit-transition: all 0.35s ease-out;-ms-transition: all 0.35s ease-out;}
.grid-item:hover .portfolio-hover-content {margin-top: 0px;}
.project-sidebar-widget{margin-bottom:40px;}
.project-sidebar-widget h3, .project-sidebar-widget h4{margin-bottom:5px;}
.project-screens{margin-bottom:40px; float:right;}
.project-nav{margin-bottom:40px; padding:10px 0;}
.project-nav .prev-project{float:left;}
.project-nav .next-project{float:right;}
.screen-slider .slick-dots{bottom:20px;}
.inner-container{padding:100px 0; transition: height 0.3s ease-in; -moz-transition: height 0.3s ease-in;-o-transition: height 0.3s ease-in;-webkit-transition: height 0.3s ease-in;-ms-transition: height 0.3s ease-in;}
ul.project-category{text-align:center; margin-bottom:40px;}
ul.project-category li{display:inline-block; padding:2px 5px;}
ul.project-category li a{float:left; padding:5px 20px; border:solid 1px #222; color:#222; text-transform:uppercase;  transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
ul.project-category li a:hover, ul.project-category li a.active{background:#222; color:#fff;}
.grid-item {margin-bottom:30px;}
.grid-item img{width:100%;}
.portfolio-hover{position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.9); text-align:center;  opacity:0;   transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in;-o-transition: all 0.3s ease-in;-webkit-transition: all 0.3s ease-in;-ms-transition: all 0.3s ease-in;}
.grid-item:hover .portfolio-hover{opacity:1;}
.portfolio-hover-content {-webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); top: 50%; position:absolute; width:100%; padding:15px; margin-top: -25px; transition: all 0.35s ease-out; -moz-transition: all 0.35s ease-out;-o-transition: all 0.35s ease-out;-webkit-transition: all 0.35s ease-out;-ms-transition: all 0.35s ease-out;}
.grid-item:hover .portfolio-hover-content {margin-top: 0px;}
.project-sidebar-widget{margin-bottom:40px;}
.project-sidebar-widget h3, .project-sidebar-widget h4{margin-bottom:5px;}
.project-screens{margin-bottom:40px; float:right;}
.project-nav{margin-bottom:40px; padding:10px 0;}
.project-nav .prev-project{float:left;}
.project-nav .next-project{float:right;}
.screen-slider .slick-dots{bottom:20px;}

  <div class="inner-container" >
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <div class="project-sidebar-widget">
            <h3>Provide Your Email Address Above</h3>
            <p>Enter a valid email address above that can be used upon checkout if you decide to purchase any Yaeger materials after you take the FREE assessment. This way your assessment results will be tied to your future account!</p>
          </div>
        </div>
        <div class="col-md-8">
          <div class="project-screens"><img src="include/images/assess1.jpg" alt="" /></div>
        </div>
        <div class="col-md-4">
          <div class="project-sidebar-widget">
            <h3>Start the Assessment!</h3>
            <p>After entering your email address, click the start assessment button above. You will have the chance to select just the courses you are interested in before the assessment begins.<br><br>
            Exam Like Questions<br><br>
            Your assessment comes with AICPA released questions that match the CPA exam. Yaeger CPA Review has implemented an algorithm to test your strengths and weakness across the topics found on the CPA Exam.<br><br>
            An easy to use, informative format<br><br>
            In our assessment engine, you can watch the clock to maintain your pace and see your remaining time. You can flag a question for review at a later time. Plus you can navigate to any question at any time by using the table of contents.</p>
          </div>
        </div>
        <div class="col-md-8">
          <div class="project-screens"><img src="include/images/assess2.jpg" alt="" /></div>
        </div>
        <div class="col-md-4">
          <div class="project-sidebar-widget">
            <h3>Get Instant Recommendations Based on Your Results!!</h3>
            <p>Compare your score to other potential students and get personalized product recommendations based on how you did!<br><br>
            Were you right or wrong?<br><br>
            Dive into the detail on each question to view the answer and an explanation. If you got a question wrong, see what the right answer should have been. Even if you answered correctly, check out of the official explanation to see if the rationale you used was right.</p>
          </div>
        </div>
        <div class="col-md-8">
          <div class="project-screens"><img src="include/images/assess3.jpg" alt="" /></div>
        </div>
      </div>
    </div>
  </div>

我希望第三行遵循第一和第二个概念。这是实时页面的链接:http://delcontedesigns.com/yaeger/free-assessment

我确定我忽略了一些简单的事情，或者我可能犯了一个大错误，我可以用一双新的眼睛。

Answer 1

将列类换成不同的行以保持它们垂直。这是最快的解决方法。还要检查您的列类并确保它们正确加起来。