float 요소 중앙정렬 > html

html

float 요소 중앙정렬

작성일 17-08-02 09:09

페이지 정보

작성자서방님 조회 151회 댓글 0건

본문

flaoting 된 요소는 float의 방향에 맞춰 늘러 붙어버리는데 이녀석을 가운데 정렬하는 방법입니다.
보통 가로 사이즈를 주고 가로 margin 을 auto 로 설정해서 해결 했었는데 가로 사이즈가 가변일 경우 이게 해결책이 될 수 없었죠.

지인을 통해 알게된 방법이고 지인도 구글링을 하다 알게되었다 합니다.

html

1
2
3
4
5
6
7
&lt;ul id="test"&gt;
    &lt;li&gt;아이유&lt;/li&gt;
    &lt;li&gt;효느님&lt;/li&gt;
    &lt;li&gt;수지&lt;/li&gt;
    &lt;li&gt;리지&lt;/li&gt;
    &lt;li&gt;돼지&lt;/li&gt;
&lt;/ul&gt;

css

JavaScript
1
2
3
4
5
6
7
8
9
10
11
#test {
    float: right;
    position: relative;
    left: -50%;
}
#test li {
    float: left;
    position: relative;
    left: 50%;
    border: 1px solid red;
}

테스트는 http://jsfiddle.net/E2aVK/ 여기에서 가능합니다.

<ul id="bestseller">

	<li>아이유</li>

	<li>효느님</li>

	<li>수지</li>

	<li>리지</li>

	<li>돼지</li>

</ul>

<style type="text/css">

#bestseller {float:right; position:relative; left:-50%;}

#bestseller li {float:left; position:relative; left:50%; border:1px solid red;}

</style>

댓글목록

등록된 댓글이 없습니다.

게시물 검색