Web Materia BLOG

ウェブマテリアブログ

Mar

02

2015

0

COMMENTS

横並びにさせてliなどのリストを中央寄せにするCSS

Category:CSS, HTML

横並びにさせてliなどのリストを中央寄せにするCSS

positionのrelativeを使用しulのリストを50%右に移動し、liを50%左に移動させることでセンタリング表示されるという理屈です。


HTML

<div class="list">
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
</div>

CSS

<style type="text/css">
.list {
    border: 1px solid #CCC;
    padding: 10px;
    overflow: hidden;
    position: relative;
}
.list ul {
    list-style: none outside none;
    float: left;
    margin: 0 0 0 0;
    padding: 0;
    position: relative;
    left: 50%;
}
.list ul li {
    float: left;
    margin-right: 5px;
    padding: 5px;
    border: 1px solid #999;
    position: relative;
    left: -50%;
}
</style>

Comments

comments



Archive

Category


PageTOPへ