센터 - div로
몇 가지 검색 후 목록을 <li>
고정 너비로 중앙에 배치하는 적절한 방법을 찾지 못했습니다 div
.
페이지를 보세요 .. 그것도 작동하지 않습니다!
ul
및 li
요소는 display: block
기본적으로 있으므로 컨테이너보다 작은 너비와 자동 여백을 제공합니다 .
ul {
width: 70%;
margin: auto;
}
표시 속성을 변경했거나 일반 정렬 규칙을 재정의하는 작업 (예 : 부동)을 수행 한 경우 작동하지 않습니다.
ul을 중앙에 배치하고 li 요소도 중앙에 배치 하고 ul의 너비를 동적으로 변경하려면 display : inline-block; 중앙 div로 감싸십시오.
<style type="text/css">
.wrapper {
text-align: center;
}
.wrapper ul {
display: inline-block;
margin: 0;
padding: 0;
/* For IE, the outcast */
zoom:1;
*display: inline;
}
.wrapper li {
float: left;
padding: 2px 5px;
border: 1px solid black;
}
</style>
<div class="wrapper">
<ul>
<li>Three</li>
<li>Blind</li>
<li>Mice</li>
</ul>
</div>
최신 정보
다음은 위 코드에 대한 jsFiddle 링크 입니다.
단계 :
- 쓰기
style="text-align:center;"
부모div
의ul
- 쓰기
style="display:inline-table;"
에ul
- 쓰기
style="display:inline;"
에li
또는 사용
<div class="menu">
<ul>
<li>item 1 </li>
<li>item 2 </li>
<li>item 3 </li>
</ul>
</div>
<style>
.menu { text-align: center; }
.menu ul { display:inline-table; }
.menu li { display:inline; }
</style>
나는 flexbox를 좋아합니다.
ul {
justify-content: center;
display: flex;
}
이것은 모든 DIV 컨테이너 내부에 UL을 중앙에 배치하는 더 좋은 방법입니다.
이 CSS 솔루션은 Width 및 Float 속성을 사용하지 않습니다. Float : Left 및 Width : 70 %는 다른 메뉴 항목이있는 다른 페이지에 메뉴를 복제해야 할 때 골칫거리가됩니다.
너비 대신 패딩과 여백을 사용하여 텍스트 / 메뉴 항목 주변의 공간을 결정합니다. 또한 LI 요소에서 Float : Left를 사용하는 대신 display : inline-block을 사용하십시오.
LI를 왼쪽으로 띄우면 말 그대로 콘텐츠를 왼쪽으로 띄운 다음 위에 언급 한 해킹 중 하나를 사용하여 UL을 중앙에 배치해야합니다. Display : inline-block은 Float 속성을 생성합니다 (일종). LI 요소를 가져 와서 서로 나란히 놓이는 블록 요소로 변환합니다 (부동이 아님).
반응 형 디자인과 Bootstrap 또는 Foundation과 같은 프레임 워크를 사용하면 콘텐츠를 플로팅하고 중앙에 배치하려고 할 때 문제가 발생합니다. 몇 가지 기본 제공 클래스가 있지만 항상 처음부터 수행하는 것이 좋습니다. 이 솔루션은 동적 메뉴 (예 : Adobe Business Catalyst 메뉴 시스템)에 훨씬 적합합니다.
이 자습서에 대한 참조는 http://html-tuts.com/center-div-image-table-ul-inside-div/ 에서 찾을 수 있습니다 .
HTML
<div class="container">
<ul>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
<li><a href="#">Button</a></li>
</ul>
</div>
CSS
.container {
text-align: center;
border: 1px solid green;
}
.container ul {
border: 2px solid red;
display: inline-block;
margin: 10px 0;
padding: 2px;
}
.container li {
display: inline-block;
}
.container li a {
display: inline-block;
background: #444;
color: #FFF;
padding: 5px;
text-decoration: none;
}
둘 중 하나 일 수 있습니다
div ul
{
width: [INSERT FIXED WIDTH]
margin: 0 auto;
}
또는
div li
{
text-align: center;
}
어떻게 생겼는지 (또는 결합)
블록 개체 (예 :)를 가운데 ul
에 맞추려면 너비를 설정 한 다음 해당 개체의 왼쪽 및 오른쪽 여백을 자동으로 설정할 수 있습니다.
블록 객체의 인라인 내용 (예 :의 인라인 내용 li
) 을 중앙에 배치하려면 css 속성을 설정할 수 있습니다 text-align: center;
.
시험
div#divID ul {margin:0 auto;}
그냥 추가 text-align: center;
당신에게 <ul>
. 문제 해결됨.
흥미롭지 만 ul 내부에 떠 다니는 li 요소로 이것을 시도 하십시오 : 여기 예제
이제 문제는 ul이 실제로 중앙에 앉기 위해 고정 된 너비가 필요합니다. 그러나 우리는 컨테이너 너비 (또는 동적)와 관련하여 그것을 원합니다. margin : 0 auto on the ul 작동하지 않습니다.
더 나은 방법은 UL / Li 목록을 버리고 여기 에서 다른 접근 방식 예제를 사용하는 것입니다.
당신이의 폭을 알고 있다면 ul
당신은 단순히의 여백 설정할 수 있습니다 ul
로를0 auto;
This will align the ul
in the middle of the containing div
Example:
HTML:
<div id="container">
<ul>
<li>Item1</li>
<li>Item2</li>
</ul>
<div>
CSS:
#container ul{
width:300px;
margin:0 auto;
}
Here is the solution I could find:
#wrapper {
float:right;
position:relative;
left:-50%;
text-align:left;
}
#wrapper ul {
list-style:none;
position:relative;
left:50%;
}
#wrapper li{
float:left;
position:relative;
}
Another option is:
HTML
<nav>
<ul class = "main-nav">
<li> Productos </li>
<li> Catalogo </li>
<li> Contact </li>
<li> Us </li>
</ul>
</nav>
CSS:
nav {
text-align: center;
}
nav .main-nav li {
float: left;
width: 20%;
margin-right: 5%;
font-size: 36px;
text-align: center;
}
I have been looking for the same case and tried all answers by change the width of <li>
.
Unfortunately all were failed to get the same distance on left and right of the <ul>
box.
The closest match is this answer but it needs to adjust the change of width with padding
.container ul {
...
padding: 10px 25px;
}
.container li {
...
width: 100px;
}
See the result below, all distance between <li>
also to the <ul>
box are the same.
You may check it on this jsFiddle:
http://jsfiddle.net/qwbexxog/14/
<div id="container">
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</td>
</tr>
</table>
</div>
use oldschool center-tags
<div> <center> <ul> <li>...</li> </ul></center> </div>
:-)
참고URL : https://stackoverflow.com/questions/1708054/center-ul-li-into-div
'developer tip' 카테고리의 다른 글
Elmah가 asp.net 사이트에서 작동하지 않음 (0) | 2020.10.06 |
---|---|
NSTimeInterval to HH : mm : ss? (0) | 2020.10.06 |
필수 속성 HTML5 (0) | 2020.10.06 |
if 문과 if-else 문 중 어느 것이 더 빠릅니까? (0) | 2020.10.06 |
MySQL 비밀번호가 만료되었습니다. (0) | 2020.10.06 |