圖像不能在水平顯示

Question

我想讓圖像自動處於水平狀態，我應該再放一個div嗎？因爲圖片將被它們的位置自動保存

這是我的CSS：

.row{ 
    display: block; 
    height:auto; 
    width:auto; 
} 

.box_img2{ 
    width: 20px; 
    padding : 5px; 
    margin-bottom:5px; 
    background-color:white; 
    height:30px; 
    float:center; 
} 

這是我的PHP：

<?php 
           include('../connection/connect.php'); 
           $result = $db->prepare("SELECT * FROM candposition ORDER BY posid ASC"); 
           $result->bindParam(':userid', $res); 
           $result->execute(); 
           for($i=0; $row = $result->fetch(); $i++){ 
           $dsds=$row['posid']; 


           $resulta = $db->prepare("SELECT sum(votes) FROM candidates WHERE posid= :a"); 
           $resulta->bindParam(':a', $dsds); 
           $resulta->execute(); 
           for($i=0; $rowa = $resulta->fetch(); $i++){ 
           $dsada=$rowa['sum(votes)']; 
           } 
           echo '<div style="margin-top: 18px;">'; 
           echo '<strong>'.$row['pos_name'].'&nbsp;'.'</strong><br>'; 

           $results = $db->prepare("SELECT * FROM candidates,student WHERE candidates.idno=student.idno AND posid= :a ORDER BY votes DESC"); 

           $results->bindParam(':a', $dsds); 
           $results->execute(); 
            for($i=0; $rows = $results->fetch(); $i++){ 

             if($dsds=='Commissoner'){ 
              echo $rows['prog_id'].$rows['prog_id'].'&nbsp;&nbsp;'.$rows['prog_name'].'&nbsp;&nbsp;=&nbsp;&nbsp;'.$rows['votes']; 

             }else { 
              echo "<div class='row'><div class='box_img2'><br>"; 
              echo '<img src="savephp/images/'.$rows['image'].'" width="60" height="70px" />'.'&nbsp;'.$rows['lastname'].',&nbsp;'.$rows['firstname'].'<br>'.'&nbsp;=&nbsp;'.$rows['votes']; 
              echo '</div>'; 
             } 
             echo '</div>'.'</div>'; 
              $sdsd=$dsada  
             ?> 
            <br><br><br><br><br> 

            <img src="../img/percent.gif"width='<?php echo(100*round($rows['votes']/($sdsd),2)); ?>'height='10'> 
           <?php 


     if ($rows['votes']==0){ 
          echo "<br>";} 
          else { 
          echo(100*round($rows['votes']/($sdsd),2)); ?>%<br> 
        <?php 
         } 
         echo '</div>'; 
        } 

        ?> 
        <?php 
      } 
      ?> 

以下是圖像： I want to be like this

Answer 1

試試這個：

.box_img2{ 
width: 20px; 
padding : 5px; 
background-color:white; 
height:30px; 
position: fixed; /* or absolute */ 
top: 50%; 
left: 50%; 
margin-top: -15px; 
margin-left: -10px; 
} 

Answer 2

試着沿着這條路走下去，看着像Boostrap的方法來做縮略圖網格等等，可能會幫助你很多。

注意，在IMG CSS是更多的要麼/或東西......一箇中心，其它將使它填滿整個容器的33％。

<style type='text/css'> 
    .row:before, .row:after { clear:both; } 

    .img-container { 
     float:left; 
     width:33%; 
     text-align:center; 
    } 
    .img-container img { /* if you want it centered */ 
     display:block; margin:0 auto; 
    } 
</style> 
<div class='row'> 
    <?php for($i=0; $rows = $results->fetch(); $i++) { ?> 
     <div class='img-container'> 
      <img src="savephp/images/<?php echo $rows['image'] ?>" width="60" height="70px" /> 
      &nbsp;<?php echo $rows['lastname'] ?>, <?php echo $rows['firstname'] ?><br /> 
      &nbsp;=<?php echo $rows['votes'] ?> 
     </div> 
    <?php } ?> 
</div> 

UPDATE我已經更新上面的代碼給把圖像轉換成網頁的總體思路。您可以根據需要構建HTML和條件的其餘部分。重要的是要注意的是，如果你想要水平橫跨3張圖像，請將33％的寬度設置爲0.。如果您只想要2水平，請將50％的寬度設爲.img-container。他們將自動換行到下一行。您的代碼正在爲每個條目創建一個新的<div class="row">，這會將每個新條目放到其自己的行中，而不是水平佈局它們。

如果您在想要獲得100％排的比賽中得到分數，則可以使用width:100%來給這個不同的分數，它會將自己放在自己的排上。同樣，如果您查找網格如何與Bootstrap 3一起工作，它將幫助您獲得幾乎所有您想要的對齊方式，並且我強烈建議您使用類似的方式開始工作，然後一旦您擅長創建佈局...然後弄清楚他們是如何做到的。