- Katılım
- 18 Haziran 2016
- Mesajlar
- 2.155
- Makaleler
- 2
- Çözümler
- 12
Selamlar. Basit bir çalışma yapıyorum. Ana Div'in içerisinde birden fazla Div var. Bunları tam ortalanacak şekilde yan yana, Div'in genişliği yetmediği durumda alt satıra geçerek devam edecek bir tasarım yapmayı düşünüyorum ama bir türlü halledemedim. float:left; yapınca sola yaslanıyor fakat sağ tarafta daha fazla boşluk gözüküyor. Tam ortalanmasını istiyorum. Yardımcı olursanız çok memnun olurum.
[CODE lang="html" title="HTML"]<body>
<div style="padding:25px; margin-top: 100px; margin-bottom: 100px; margin-left: 200px; margin-right: 200px; height:auto; background:red;">
<div class="itemContainer">
<p>Tüm yazılarımıza erişmek için <a href="#" >buraya</a> tıklayın.</p>
</div>
<div class="itemContainer">
<p>Tüm yazılarımıza erişmek için <a href="#" >buraya</a> tıklayın.</p>
</div>
<div class="itemContainer">
<p>Tüm yazılarımıza erişmek için <a href="#" >buraya</a> tıklayın.</p>
</div>
<div class="itemContainer">
<p>Tüm yazılarımıza erişmek için <a href="#" >buraya</a> tıklayın.</p>
</div>
<div class="itemContainer">
<p>Tüm yazılarımıza erişmek için <a href="#" >buraya</a> tıklayın.</p>
</div>
<div class="itemContainer">
<p>Tüm yazılarımıza erişmek için <a href="#" >buraya</a> tıklayın.</p>
</div>
<div class="itemContainer">
<p>Tüm yazılarımıza erişmek için <a href="#" >buraya</a> tıklayın.</p>
</div>
<div style="clear:both;"></div>
</div>
</body>[/CODE]
[CODE lang="css" title="CSS"].itemContainer{
float:left;
margin:25px;
padding: %100;
width: 200px;
height: 200px;
background: #ff5555;
border-radius:50px;
border-color: red;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}[/CODE]
[CODE lang="html" title="HTML"]<body>
<div style="padding:25px; margin-top: 100px; margin-bottom: 100px; margin-left: 200px; margin-right: 200px; height:auto; background:red;">
<div class="itemContainer">
<p>Tüm yazılarımıza erişmek için <a href="#" >buraya</a> tıklayın.</p>
</div>
<div class="itemContainer">
<p>Tüm yazılarımıza erişmek için <a href="#" >buraya</a> tıklayın.</p>
</div>
<div class="itemContainer">
<p>Tüm yazılarımıza erişmek için <a href="#" >buraya</a> tıklayın.</p>
</div>
<div class="itemContainer">
<p>Tüm yazılarımıza erişmek için <a href="#" >buraya</a> tıklayın.</p>
</div>
<div class="itemContainer">
<p>Tüm yazılarımıza erişmek için <a href="#" >buraya</a> tıklayın.</p>
</div>
<div class="itemContainer">
<p>Tüm yazılarımıza erişmek için <a href="#" >buraya</a> tıklayın.</p>
</div>
<div class="itemContainer">
<p>Tüm yazılarımıza erişmek için <a href="#" >buraya</a> tıklayın.</p>
</div>
<div style="clear:both;"></div>
</div>
</body>[/CODE]
[CODE lang="css" title="CSS"].itemContainer{
float:left;
margin:25px;
padding: %100;
width: 200px;
height: 200px;
background: #ff5555;
border-radius:50px;
border-color: red;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}[/CODE]