데릭쉐퍼드와 중심 맞추십시오 수평 메뉴.
이것은 내 코드:
<div class="topmenu-design">
<!-- Top menu content: START -->
<ul id="topmenu firstlevel">
<li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
<li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
<li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
</ul>
<!-- Top menu content: END -->
</div>
I know how to center 'ul' 맞춤 div 내에 ''. # 39 을 사용하여 수행할 수 있는 Sarfraz& 제안이다. 하지만 여전히 목록 항목을 하던 내 왼쪽 'ul'.
이를 위해 Javascript 필요합니까?
Http://pmob.co.uk/pob/centred-float.htm 에서:
기본적으로 > 전제로 한 쉽고, 그냥 部门从 비트리스 부동 소수점 왼쪽에 있는 래퍼 하던 다음 왼쪽으로 상대치, 큰 화면 밖에서 너버 위치: 왼쪽 50% 였다. 그런 다음 네스트된 내부 요소가 반전됩니다 및 상대 위치를 + 50% 가 적용된다. 이 요소는 죽은입니다 중앙에 배치하고 효과가 있습니다. 그 흐름을 유지보수합니다 상대치 포지셔닝도 흐름 및 다른 내용을 있습니다.
<! - begin 스니핏: js 숨기십시오: > 거짓값 -;
<div id="buttons">
<ul>
<li><a href="#">Button 1</a></li>
<li><a href="#">Button 2's a bit longer</a></li>
<li><a href="#">Butt 3</a></li>
<li><a href="#">Button 4</a></li>
</ul>
</div>
#buttons{
float:right;
position:relative;
left:-50%;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
}
#buttons li{float:left;position:relative;}/* ie needs position:relative here*/
#buttons a{
text-decoration:none;
margin:10px;
background:red;
float:left;
border:2px outset blue;
color:#fff;
padding:2px 5px;
text-align:center;
white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/
끝 - < 스니핏 >;!
이 방법은 나여야지 만약 제가 질문을 잘못 해석하여 haven& # 39, t, 시도해 볼 수 있습니다.
<! - begin 스니핏: js 숨기십시오: > 거짓값 -;
div#centerDiv {
width: 100%;
text-align: center;
border: 1px solid red;
}
ul.centerUL {
margin: 2px auto;
line-height: 1.4;
padding-left: 0;
}
.centerUL li {
display: inline;
text-align: center;
}
<div id="centerDiv">
<ul class="centerUL">
<li><a href="http://www.amazon.com">Amazon 1</a> </li>
<li><a href="http://www.amazon.com">Amazon 2</a> </li>
<li><a href="http://www.amazon.com">Amazon 3</a></li>
</ul>
</div>
끝 - < 스니핏 >;!
Css3 함께 플렉상자. 단순해졌습니다.
ul {
display: flex;
justify-content: center;
}
ul li {
padding: 0 8px;
}
이것은 가장 간단한 방법은 찾았다. 내가 사용하면 html. 이제 막 패딩 있지만브라우저에 재설정하려면 설정값으로.
<! - begin 스니핏: js 숨기십시오: > 거짓값 -;
ul {
text-align: center;
padding: 0;
}
li {
display: inline-block;
}
<div class="topmenu-design">
<!-- Top menu content: START -->
<ul id="topmenu firstlevel">
<li class="firstli" id="node_id_64">
<div><a href="#"><span>Om kampanjen</span></a>
</div>
</li>
<li id="node_id_65">
<div><a href="#"><span>Fakta om inneklima</span></a>
</div>
</li>
<li class="lastli" id="node_id_66">
<div><a href="#"><span>Statistikk</span></a>
</div>
</li>
</ul>
<!-- Top menu content: END -->
</div>
끝 - < 스니핏 >;!
데모 - http://codepen.io/grantex/pen/InLmJ
<div class="navigation">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Menu</a></li>
<li><a href="">Others</a></li>
</ul>
</div>
.navigation {
max-width: 700px;
margin: 0 auto;
}
.navigation ul {
list-style: none;
display: table;
width: 100%;
}
.navigation ul li {
display: table-cell;
text-align: center;
}
.navigation ul li a {
padding: 5px 10px;
width: 100%;
}
Omg 너무 합성법.
Do it like this:
<div id="footer">
<ul>
<li><a href="/1.html">Link 1</a></li>
<li><a href="/2.html">Link 2</a></li>
<li><a href="/3.html">Link 3</a></li>
<li><a href="/4.html">Link 4</a></li>
<li><a href="/5.html">Link 5</a></li>
</ul>
</div>
및 CSS.
#footer {
background-color:#ccc;
height:39px;
line-height:36px;
margin:0 auto;
text-align:center;
width:950px;
}
#footer ul li {
display:inline;
font-family:Arial,sans-serif;
font-size:1em;
padding:0 2px;
text-decoration:none;
}
, 여백 0 auto it& # 39 에 대한 모든 것을 포함하는 '에서' 이렇게 하면 어떤 사람들은 다른 사람들 덕분에, div 바란다.) 와 함께 하는 이 이미 다른 것을 제안했다.
.divNav
{
width: 99%;
text-align:center;
margin:0 auto;
}
.divNav ul
{
display:inline-block;
list-style:none;
zoom: 1;
}
.divNav ul li
{
float:left;
margin-right: .8em;
padding: 0;
}
.divNav a, #divNav a:visited
{
width: 7.5em;
display: block;
border: 1px solid #000;
border-bottom:none;
padding: 5px;
background-color:#F90;
text-decoration: none;
color:#FFF;
text-align: center;
font-family:Verdana, Geneva, sans-serif;
font-size:1em;
}
일반적으로 운행에서어떠한 중심 검정 수준 요소 (like a ',' ul> <,) 는 ',' 재산이잖아 사용하여 자동 승리를 거두었다.
블록 내의 "텍스트 가운데 정렬; 사용할 레벨 요소 요소에 정렬하려면 텍스트 및 인라인 수준 '. 그래서 모두가 같은 일이.
ul {
margin:auto;
}
ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
. 노력해야 합니다.
프린지 (fringe) 는 인터넷 비유하사 explorer6. 심지어 다른 대행사를 본사를 사용하지 않을 때 '< DOCTYPE>;!'. IE6 을 잘못 사용하여 정렬되고 에르메네츠 블록 단위로 '텍스트 정렬'. # 39 지원할 수 있도록 하고, 만일 you& 보았으매 IE6 (또는 ',' 사용하지 않으면 <! DOCTYPE>) 전체에 솔루션은.
div.topmenu-design {
text-align:center;
}
div.topmenu-design ul {
margin:auto;
}
div.topmenu-design ul li {
text-align:center;
list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
display:inline; /* so that the bullet points aren't above the content */
}
Id = ',' 로, 각주, 내가 생각하는 'id' 는 잘못된 표시됨과 " 토프메누 firstlevel" 속성용 can& # 39, t 공백이 포함되어 있습니다. ? 그러나 [w3c 권고안을 eventtest] [1] 이 [# 39, & # 39, name& id '속성' 로 유형] [2].
>. ID 와 NAME 토큰을 시작해야 합니다. >. 문자 ([z 는 za]) 과 5월 따라야 >. 원하는 만큼 의해 문자, 숫자 >. ([0-9]), 하이픈 (- " ";), 밑줄 >. (_" ";), 콜론 (:" ";), 및 기간 >. (." ";).
[1]: http://www.w3.org/TR/html401/struct/global.html # 이데프 id [2]: http://www.w3.org/TR/html401/types.html # 유형 이름
내가 사용한 인라인 블록이어야 표시 속성: 래퍼 구성되어 있는 솔루션을 사용하여 고정된 너비입니다. Ul 블록 안에 있는 인라인 블록 전시. 이를 사용하여 ul 그냥 시행하십시오 너비의 실제 컨텐츠! 마지막으로 승리를 거두었다. 자동차, 이 가운데 인라인 블록 0 =)
/*ul wrapper*/
.gallery_wrapper{
width: 958px;
margin: 0 auto;
}
/*ul list*/
ul.gallery_carrousel{
display: inline-block;
margin: 0 auto;
}
.contenido_secundario li{
float: left;
}
[it 설정되었습니다 robusto& 사용하여 # 39 의 샘플 코드] < br>; HTML:< br>;
<div id="centerDiv">
<ul class="centerUL">
<li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150> </a> </li>
<li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a> </li>
<li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
</ul>
</div>
< br>; CSS.
div#centerDiv {
width: 700px;
text-align: center;
border: 1px solid red;
}
ul.centerUL {
margin: 2px auto;
line-height: 1.4;
}
.centerUL li {
display: inline;
text-align: center;
}
.topmenu-design
{
display: inline-table;
}
모든!