网页的文字对齐方式

Question

我希望复制屏幕左侧的代码并让它位于图片的右侧。我试过漂浮左，虽然这只是混乱的文字，它没有正确坐在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;}

Answer 1

始终使用包装纸 尽可能多地设置包装器宽度。您可以更改它以使其完全靠右图像 将包装器text-align属性设置为left 周期。

#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>