語義UI CSS右填充

我有用於製作卡片堆疊盒的此代碼。問題是，這個盒子向我展示了一個正確的paddding在片段中，任何人都可以幫助我？語義UI CSS右填充

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <link rel="stylesheet" href="./semantic/semantic.css"/> 
    <title>Agora</title> 
</head> 
<body> 
<div class="ui teal inverted menu" style="border-radius: 0px;"> 
    <div class="item"> 
     <div class="huge ui buttons"> 
     <div class="ui button">One</div> 
     <div class="ui button">Two</div> 
     <div class="ui button">Three</div> 
    </div> 
    </div> 
    <div class="item"> 
     <div class="ui button">Log-in</div> 
    </div> 
</div> 

<div class="ui column centered grid"> 
    <div class="fourteen wide column"> 
     <div class="ui center aligned segment"> 


      <div class="ui stackable four column centered grid" > 
       <div class="column"> 
        <div class="ui card"> 
         <div class="image"> 
          <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> 
         </div> 
         <div class="content"> 
          <a class="header">Stevie Feliciano</a> 
          <div class="meta"> 
           <span class="date">Joined in 2014</span> 
          </div> 
          <div class="description"> 
           Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing. 
          </div> 
         </div> 
         <div class="extra content"> 
          <a> 
           <i class="user icon"></i> 
           22 Friends 
          </a> 
         </div> 
        </div> 
       </div> 
       <div class="column"> 
        <div class="ui card"> 
         <div class="image"> 
          <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> 
         </div> 
         <div class="content"> 
          <a class="header">Stevie Feliciano</a> 
          <div class="meta"> 
           <span class="date">Joined in 2014</span> 
          </div> 
          <div class="description"> 
           Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing. 
          </div> 
         </div> 
         <div class="extra content"> 
          <a> 
           <i class="user icon"></i> 
           22 Friends 
          </a> 
         </div> 
        </div> 
       </div> 
       <div class="column"> 
        <div class="ui card"> 
         <div class="image"> 
          <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> 
         </div> 
         <div class="content"> 
          <a class="header">Stevie Feliciano</a> 
          <div class="meta"> 
           <span class="date">Joined in 2014</span> 
          </div> 
          <div class="description"> 
           Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing. 
          </div> 
         </div> 
         <div class="extra content"> 
          <a> 
           <i class="user icon"></i> 
           22 Friends 
          </a> 
         </div> 
        </div> 
       </div> 
       <div class="column"> 
        <div class="ui card"> 
         <div class="image"> 
          <img src="http://semantic-ui.com/images/avatar/large/elliot.jpg"> 
         </div> 
         <div class="content"> 
          <a class="header">Stevie Feliciano</a> 
          <div class="meta"> 
           <span class="date">Joined in 2014</span> 
          </div> 
          <div class="description"> 
           Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing. 
          </div> 
         </div> 
         <div class="extra content"> 
          <a> 
           <i class="user icon"></i> 
           22 Friends 
          </a> 
         </div> 
        </div> 
       </div> 
      </div> 


     </div> 
    </div> 
</div> 




</body> 
</html>

這是問題的圖像： http://imgur.com/1lrpbUL.png

我需要刪除這是在右側的填充。

來源

2015-06-27 jaume5900

這可能是一個問題，這些卡片中的每一張都沒有填充其列的寬度，因此它們對齊到左側。

您可以使用提到的提供的「.cards」類（它使用flexbox來完美地適應卡片）。

在文檔中發現的代碼：

<div class="ui cards"> 

    <div class="card"> 
    <a class="image"> 
     <img src="/images/avatar/large/elliot.jpg"> 
    </a> 
    <div class="content"> 
     <a class="header">Elliot Fu</a> 
     <div class="meta"> 
     <a>Friends</a> 
     </div> 
     <div class="description"> 
     Elliot Fu is a film-maker from New York. 
     </div> 
    </div> 
    </div> 

    <div class="card"> 
    <a class="image"> 
     <img src="/images/avatar/large/helen.jpg"> 
    </a> 
    <div class="content"> 
     <a class="header">Helen Troy</a> 
     <div class="meta"> 
     <a>Friends</a> 
     </div> 
     <div class="description"> 
     Helen Troy is an archivist living in New York, who enjoys cooking, fine art, and gardening. 
     </div> 
    </div> 
    </div> 

</div>

來源

2015-06-27 19:50:31

但我想爲中心的卡......我該怎麼辦呢？ – jaume5900

對不起，我沒有從描述中得到它。那麼，如果你想把卡片放在列的中心，你可以設置text-align：center到列（也可以將填充設置爲0）。如果.card具有固定寬度，則應使用margin：0 auto。 –

語義UI CSS右填充

回答

相關問題