2017-07-02 11 views
1

私はsemantic-uiフレームワークを使用しています。私は構造のようなポストコメントをしようとしています。あなたは私が項目幅70%のマージンオートを行っているが、それは中央揃えていない見ることができるようにマージンプロパティが機能しません

<!DOCTYPE html> 
<html> 
<head> 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> 

<title>Assignments</title> 
    <style> 
     .items { 
      width: 70%; 
      border: solid; 
      margin: 100px; 
     } 
    </style> 


</head> 
<body> 


<div class="ui items"> 
    <div class="item"> 
    <a class="ui tiny image"> 
     <img src="img_avatar3.png"> 
    </a> 
    <div class="content"> 
     <a class="header">Jenny Hess</a> 
     <div class="metadata"> 
     <span class="date">Today at 5:42PM</span> 
     </div> 
     <div class="description"> 
     <p>First Post Ever In My Life</p> 
     </div> 
    </div> 
    </div> 
    <div class="ui comments"> 

    <div class="comment"> 
    <a class="avatar"> 
     <img src="img_avatar3.png"> 
    </a> 
    <div class="content"> 
     <a class="author">Matt</a> 
     <div class="metadata"> 
     <span class="date">Today at 5:42PM</span> 
     </div> 
     <div class="text"> 
     How artistic! 
     </div> 
    </div> 
    </div> 
    <div class="comment"> 
    <a class="avatar"> 
     <img src="img_avatar3.png"> 
    </a> 
    <div class="content"> 
     <a class="author">Elliot Fu</a> 
     <div class="metadata"> 
     <span class="date">Yesterday at 12:30AM</span> 
     </div> 
     <div class="text"> 
     <p>This has been very useful for my research. Thanks as well!</p> 
     </div> 
    </div> 
    </div> 
    <div class="comment"> 
    <a class="avatar"> 
     <img src="img_avatar3.png"> 
    </a> 
    <div class="content"> 
     <a class="author">Joe Henderson</a> 
     <div class="metadata"> 
     <span class="date">5 days ago</span> 
     </div> 
     <div class="text"> 
     Dude, this is awesome. Thanks so much 
     </div> 
    </div> 
    </div> 
    <form class="ui reply form"> 
    <div class="field"> 
     <textarea rows="3" cols="50"></textarea> 
    </div> 
    <div class="ui blue labeled submit icon button"> 
     <i class="icon edit"></i> Add Reply 
    </div> 
    </form> 
</div> 
</div> 

<div class="ui items"> 
    <div class="item"> 
    <a class="ui tiny image"> 
     <img src="img_avatar3.png"> 
    </a> 
    <div class="content"> 
     <a class="header">Jenny Hess</a> 
     <div class="metadata"> 
     <span class="date">Today at 5:42PM</span> 
     </div> 
     <div class="description"> 
     <p>First Post Ever In My Life</p> 
     </div> 
    </div> 
    </div> 
    <div class="ui comments"> 

    <div class="comment"> 
    <a class="avatar"> 
     <img src="img_avatar3.png"> 
    </a> 
    <div class="content"> 
     <a class="author">Matt</a> 
     <div class="metadata"> 
     <span class="date">Today at 5:42PM</span> 
     </div> 
     <div class="text"> 
     How artistic! 
     </div> 
    </div> 
    </div> 
    <div class="comment"> 
    <a class="avatar"> 
     <img src="img_avatar3.png"> 
    </a> 
    <div class="content"> 
     <a class="author">Elliot Fu</a> 
     <div class="metadata"> 
     <span class="date">Yesterday at 12:30AM</span> 
     </div> 
     <div class="text"> 
     <p>This has been very useful for my research. Thanks as well!</p> 
     </div> 
    </div> 
    </div> 
    <div class="comment"> 
    <a class="avatar"> 
     <img src="img_avatar3.png"> 
    </a> 
    <div class="content"> 
     <a class="author">Joe Henderson</a> 
     <div class="metadata"> 
     <span class="date">5 days ago</span> 
     </div> 
     <div class="text"> 
     Dude, this is awesome. Thanks so much 
     </div> 
    </div> 
    </div> 
    <form class="ui reply form"> 
    <div class="field"> 
     <textarea rows="3" cols="50"></textarea> 
    </div> 
    <div class="ui blue labeled submit icon button"> 
     <i class="icon edit"></i> Add Reply 
    </div> 
    </form> 
</div> 
</div> 
</body> 
</html> 

:現在、私のコードは次のようになります。誰かが私になぜ示唆できますか?

答えて

0

は、そのようなアイテムの親に特定のIDを与え、あなたは

+0

ハズレをさらに支援が必要な場合は、私に教えてくださいそれに

text-align: center; 

スタイリングを与えます。動作しません。それは画像ではなくアイテムのテキストと構造全体を中心にしています – GeorgeTheGood

+0

idをすべての要素を含む親divに与えていた –

関連する問題