가운데 맞춤을 어떻게 중앙 정렬

programing tip

가운데 맞춤을 어떻게 중앙 정렬

itbloger 2020. 6. 15. 21:57

가운데 맞춤을 어떻게 중앙 정렬
메뉴?

가로 메뉴를 가운데 정렬해야합니다. / / 등
의 혼합을 포함한 다양한 솔루션을 시도했지만 성공하지 못했습니다.inline-blockblockcenter-align

내 코드는 다음과 같습니다.

<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>

최신 정보

나는를 가운데 정렬하는 방법을 알고 ul내 div. 그것은 Sarfraz의 제안을 사용하여 달성 할 수 있습니다. 그러나 목록 항목은 여전히에 남아 있습니다 ul.

이 작업을 수행하려면 Javascript가 필요합니까?

에서 http://pmob.co.uk/pob/centred-float.htm :

전제는 간단하며 기본적으로 너비가없는 플로트 래퍼가 포함되어 왼쪽으로 떠 다니고 화면에서 왼쪽 너비 위치로 이동합니다. 왼쪽 : -50 % 다음으로 중첩 된 내부 요소가 반전되고 + 50 %의 상대 위치가 적용됩니다. 이것은 요소를 중앙에 데드로 배치하는 효과가 있습니다. 상대 위치는 흐름을 유지하고 다른 내용이 아래로 흐를 수있게합니다.

암호

#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*/

<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>

이것은 나를 위해 작동합니다. 귀하의 질문을 잘못 해석하지 않았다면 시도해 볼 수 있습니다.

    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>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 2</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

CSS3 flexbox와 함께. 단순한.

ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0 8px;
}

이것이 내가 찾은 가장 간단한 방법입니다. 나는 당신의 HTML을 사용했습니다. 패딩은 브라우저 기본값을 재설정하는 것입니다.

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://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

이 시도:

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}

다음과 같이하십시오 :

   <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;
}

많은 사람들처럼, 나는 이것으로 잠시 동안 고투 해 왔습니다. 이 솔루션은 궁극적으로 UL을 포함하는 div와 관련이있었습니다. UL의 패딩, 너비 등 변경에 대한 모든 제안은 효과가 없었지만 다음과 같은 효과가있었습니다.

margin:0 auto;포함하는 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;
}

데모-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%;
}

세상에 너무 깨끗해

일반적으로 (와 같은 <ul>) 블랙 레벨 요소를 중앙에 배치하는 방법 은 margin:auto;속성을 사용하는 것 입니다.

To align text and inline level elements within a block level element use text-align:center;. So all together something like...

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 */
}

... should work.

The fringe case is Internet Explorer6... or even other IEs when not using a <!DOCTYPE>. IE6 incorrectly aligns block level elemnts using text-align. So if you're looking to support IE6 (or not using a <!DOCTYPE>) your full solution is...

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 */
}

As a footnote, I think id="topmenu firstlevel" is invalid as an id attribute can't contain spaces... ? Indeed the w3c recommendation defines the id attribute as a 'name' type...

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

I used the display:inline-block property: the solution consist in use a wrapper with fixed width. Inside, the ul block with the inline-block for display. Using this, the ul just take the width for the real content! and finally margin: 0 auto, to center this inline-block =)

/*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;
}

i use jquery code for this. (Alternative solution)

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });

div {
     text-align: center;
}
div ul {
     display: inline-table;
}

ul as inline-table fixes the with issue. I used the parent div to align the text to center. this way it looks good even in other languages (translation, different width)

@Robusto's solution was the simplest for what I was trying to do, I suggest you use it. I was trying to do the same thing for images in an unordered list to make a gallery... I made a js fiddle to fool around with it. Feel free to try it here.

[it was set up using robusto's sample code]
HTML:

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
    </ul>
</div>

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;
}

ul{margin-left:33%}

Is a decent approximation on big screens. Its not good, but a good dirty fix.

.topmenu-design
{
    display: inline-table;
}

That all!

참고URL : https://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu

'programing tip' 카테고리의 다른 글

C에서 "콜백"이란 무엇이며 어떻게 구현됩니까? (0)	2020.06.16
Objective-C에서 NSString 토큰 화 (0)	2020.06.16
Java의 디렉토리에 파일을 만드는 방법은 무엇입니까? (0)	2020.06.15
순수한 가상 함수가 0으로 초기화되는 이유는 무엇입니까? (0)	2020.06.15
Android에서 runOnUiThread를 어떻게 사용합니까? (0)	2020.06.15

현재글가운데 맞춤을 어떻게 중앙 정렬

itbloger

가운데 맞춤을 어떻게 중앙 정렬

가운데 맞춤을 어떻게 중앙 정렬
메뉴?

암호

'programing tip' 카테고리의 다른 글

'programing tip'의 다른글

티스토리툴바

가운데 맞춤을 어떻게 중앙 정렬

가운데 맞춤을 어떻게 중앙 정렬 메뉴?

암호

'programing tip' 카테고리의 다른 글

'programing tip'의 다른글

관련글

티스토리툴바

가운데 맞춤을 어떻게 중앙 정렬
메뉴?