針對網頁的文本對齊方式

-2

我正在尋找重複屏幕左側的代碼，並讓它坐在圖像的右側。儘管這只是弄亂了文本，並且它不能正確地坐在iphone圖像旁邊，但我試過了左邊的浮動。 CSS上的服務2用於屏幕右側的文本，服務CSS用於屏幕左側的文本。這是我的代碼。

<div class="services2"> 
      <p> Screen Repair <span><br/>Example: Cracked glass/touch 
    screen, dark ink like blemishes, touch screen non responsive, screen 
discolouration. <br/><br/> </span> </p> 
      </div> 



    <div class="services2"> 
      <p> External Button Repair <span><br/> Example: sleep wake 
button unresponsive, volume up and volume down buttons no longer working 
correctly, home button not working <br/><br/> </span> </p> 
      </div> 



    <div class="services2"> 
      <p>Battery Repair <span> <br/> Example: where you have to charge 
your device more often than usual and the device runs out of power quicker 
and quicker.<br/> <br/> </span> </p> 
      </div> 



    <div class="services2"> 
      <p> Charging Port Repair <span><br/> Example: whilst plugged in 
    your device no longer charges up. </span> </p> 
      </div>

CSS：

.services{ 
width:25%; 
margin-left:2%; 
margin-top:2%;} 


.services p{ 
font-family:narrow; 
font-size:21px; 
text-align:center;} 


.services span{ 
text-align:center; 
font-family:narrow; 
font-size:18px; 
color:#525353;} 



.services2{ 
width:25%; 
margin-left:2%;} 


.services2 p{ 
font-family:narrow; 
font-size:21px; 
text-align:center;} 

.services2 span{ 
text-align:center; 
font-family:narrow; 
font-size:18px; 
color:#474747;}

來源

2017-04-25 Declan Taylor

您是否嘗試過使用Flexbox的？ – k185

@ k185是的，我試過彎曲的方向。還是行不通。 –

我已經做了這個筆，如果這是你正在尋找的 https://codepen.io/k185/pen/eWdwop?editors=1100 – k185

始終使用的包裝。
儘可能多地設置包裝寬度。您可以將其更改爲使其完全適合圖像。
將包裝文本對齊屬性設置爲左側。
期間。

#wrapper { 
 
float:right; 
 
width:30%; 
 
text-align:left; 
 
} 
 
.services{ 
 
margin-left:2%; 
 
margin-top:2%;} 
 

 

 
.services p{ 
 
font-family:narrow; 
 
font-size:21px; 
 
text-align:center;} 
 

 

 
.services span{ 
 
text-align:center; 
 
font-family:narrow; 
 
font-size:18px; 
 
color:#525353;} 
 

 

 

 
.services2{ 
 
margin-left:2%;} 
 

 

 
.services2 p{ 
 
font-family:narrow; 
 
font-size:21px; 
 
text-align:center;} 
 

 
.services2 span{ 
 
text-align:center; 
 
font-family:narrow; 
 
font-size:18px; 
 
color:#474747;}

<div id="wrapper"> 
 

 
<div class="services2"> 
 
      <p> Screen Repair <span><br/>Example: Cracked glass/touch 
 
    screen, dark ink like blemishes, touch screen non responsive, screen 
 
discolouration. <br/><br/> </span> </p> 
 
      </div> 
 

 

 

 
    <div class="services2"> 
 
      <p> External Button Repair <span><br/> Example: sleep wake 
 
button unresponsive, volume up and volume down buttons no longer working 
 
correctly, home button not working <br/><br/> </span> </p> 
 
      </div> 
 

 

 

 
    <div class="services2"> 
 
      <p>Battery Repair <span> <br/> Example: where you have to charge 
 
your device more often than usual and the device runs out of power quicker 
 
and quicker.<br/> <br/> </span> </p> 
 
      </div> 
 

 

 

 
    <div class="services2"> 
 
      <p> Charging Port Repair <span><br/> Example: whilst plugged in 
 
    your device no longer charges up. </span> </p> 
 
      </div> 
 
      
 
<div>

來源

2017-04-25 15:23:30

針對網頁的文本對齊方式

回答

相關問題