CSS kullanarak bir yazıyı iki yana yaslayabilirsiniz.
Yazıyı iki yana yaslamak için text-align özelliğinin justify değeri kullanılır. Aşağıdaki örnekte bir div içinde bulunan tüm yazılar iki yana yaslanmıştır.
HTML CSS Kodu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <style> div{ text-align: justify; /*yazıyı iki yana yasla*/ width: 500px; } </style> <div> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas nulla maiores quisquam inventore qui. Voluptate, minima, cum ex non laudantium repellendus in a veniam ad rerum possimus voluptas modi deserunt.</p> <p>Repudiandae assumenda ratione ipsum amet blanditiis, mollitia error a quo laboriosam, minima placeat? Porro cum incidunt minima inventore blanditiis ut alias repellendus placeat in temporibus, minus debitis rem sequi illo.</p> <p>Minus animi illo veritatis reiciendis! Perferendis, nobis odit? Ea quidem non ipsa officia quo enim alias, quisquam modi nostrum cum ducimus, dicta rerum atque iusto facilis aut optio facere dolores.</p> <p>Nam quo enim similique soluta dicta, in vitae saepe dolorem iusto! Distinctio error necessitatibus excepturi nulla laudantium, ipsam soluta fuga est quam perspiciatis unde tempora ipsum atque repellendus cum maiores.</p> <p>Ipsam a culpa ex cumque sed modi esse, quasi dolor beatae recusandae perferendis, quis odio voluptates fugit minus? Dignissimos eveniet quidem possimus nihil fugit quisquam reiciendis, excepturi aliquid itaque veniam!</p> </div> |
Ekran Çıktısı:
Bootstrap ile Yazıyı İki Yana Yaslama
Bootstrap ile bir yazıyı iki yana yaslamak için text-justify class’ı kullanılır.
1 2 3 4 5 6 7 8 9 | <div class="text-justify"> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas nulla maiores quisquam inventore qui. Voluptate, minima, cum ex non laudantium repellendus in a veniam ad rerum possimus voluptas modi deserunt.</p> <p>Repudiandae assumenda ratione ipsum amet blanditiis, mollitia error a quo laboriosam, minima placeat? Porro cum incidunt minima inventore blanditiis ut alias repellendus placeat in temporibus, minus debitis rem sequi illo.</p> <p>Minus animi illo veritatis reiciendis! Perferendis, nobis odit? Ea quidem non ipsa officia quo enim alias, quisquam modi nostrum cum ducimus, dicta rerum atque iusto facilis aut optio facere dolores.</p> <p>Nam quo enim similique soluta dicta, in vitae saepe dolorem iusto! Distinctio error necessitatibus excepturi nulla laudantium, ipsam soluta fuga est quam perspiciatis unde tempora ipsum atque repellendus cum maiores.</p> <p>Ipsam a culpa ex cumque sed modi esse, quasi dolor beatae recusandae perferendis, quis odio voluptates fugit minus? Dignissimos eveniet quidem possimus nihil fugit quisquam reiciendis, excepturi aliquid itaque veniam!</p> </div> |
Yorum Yap