针对网页的文本对齐方式

-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

针对网页的文本对齐方式

回答

相关问题