2016-12-31 3 views
0

私はメディアクエリを自分のコードに追加しようとしています。しかし、これまでに段落を左に動かそうとすると、テキストは次の行に移動します。 <p>タグを中央に移動するにはどうすればよいですか?ここでメディアクエリでpタグを修正するには

は私のコードです:ここでは

 @media (max-width: 1023px) and (min-width: 767px) { 

       #pt { 
       padding-left: 300px; 

       } 
       #pet { 
       text-align: center; 
       padding-left: 200px; 
       margin-bottom: 1.3em; 
       padding: 1em; 
       -webkit-column-width: 150px; 
     -moz-column-width: 150px; 
       column-width: 150px; 

       } 

      } 

      </style> 
    <div class="col-md-4 col-sm-6 col-xs-12 text-center " data-wow-delay="0.6s"> 
       <div class="service-item"> 
        <div class="service-icon"> 
         <i id="pt" class="fa fa-clock-o fa-5x"><br></i> 

        </div> 



        <h3 id="pt" style="font-size: 18px; font-family: 'Roboto', sans-serif;">Project Tracking</h3> 
        <p id="pet" style="font-size: 16px; font-family: 'Roboto', sans-serif;"> 
         Obtain constant 
         updates on the progress of the project along with images and track your investment regularly 
        </p> 
       </div> 

      </div> 

は結果である:

Result

答えて

1

あなたcolumn-width値は、初期の次の行にテキストを推進しています。サイズを大きくする。注:私はまた、中央の整列を維持するために、カップルpaddingにコメントしました。

Check resizable JSFiddle here

enter image description here

関連する問題