알 수없는 너비의 가운데에 맞춘 요소

다음과 같은 문제를 고려하십시오. 내용을 바꿀 메뉴를 가운데 정렬하려고합니다. 예를 들어 버튼을 누른 후 첫 번째 버튼의 내용은 "Hello"에서 "Greetings , user! "또는 그 라인을 따라 무엇인가 중요한 것은 요소의 너비가 변수가된다는 것입니다.알 수없는 너비의 가운데에 맞춘 요소

요소의 내용을 가운데 맞추기를 원한다고 가정합니다.

.centerMe1 { 
    margin-right: auto ; 
    margin-left: auto ; 
    max-width: 500px; 
}

이것은 내가 요소의 폭을 알 수 없기 때문에 나는,이 경우에는 사용할 수 없습니다 제외하고 꽤 잘 작동합니다. 나는 우리 시도 e float : left, 부모의 너비를 자식의 너비와 같게 설정했기 때문에 왼쪽이지만 작동하지 않았습니다. 기본적으로 너비가 올바르게 설정되었지만 요소가 중앙에 배치되지 않았습니다.

이 두 번째 클래스입니다 : 당신이 블록 요소 ul를 한 경우가 차지 않도록

.centerMe2 { 
    margin-right: auto ; 
    float: left; 
    margin-left: auto ; 
}

그리고 전체 소스 코드,

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Center Error</title> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
     <link href="bootstrap.min.css" rel="stylesheet" type="text/css" /> 
     <link href="bootstrap-responsive.min.css" rel="stylesheet" type="text/css" /> 
     <script src="http://code.jquery.com/jquery.js"></script> 
     <style type="text/css"> 
      .centerMe1 { 
       margin-right: auto ; 
       margin-left: auto ; 
       max-width:500px; 
      } 
      .centerMe2 { 
       margin-right: auto ; 
       float: left; 
       margin-left: auto ; 
      } 
     </style> 
    </head> 

    <body> 
     <div class="row-fluid"> 
     <div class="span12"> 
      <ul class="nav nav-pills centerMe1"> 
       <li class="active"><a href="#">adsadw er sdfw</a> </li> 
       <li><a href="#">QQQQQQQQQQQQQ</a></li> 
       <li><a href="#">some other random gibberish</a></li> 
      </ul> 
     </div> 
     </div> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

출처

2013-08-14 Bloodcount

'.centerMe1'는'max-width' 속성을 제거해도 잘 작동합니다. 'float'는 효과가 없습니다 – x4rf41

js 솔루션이 범위를 벗어나나요? –

"텍스트 센터"CSS 클래스를 해당 컨테이너에도 추가해야한다고 생각합니다. 그리고 btw, "span12"클래스 div주는 꽤 중복이다. 이 div 만 삭제하면됩니다. – Itay

을 (테스트 용이하게하기 위해) 너비를 지정하면 li을 display:inline-block으로 설정할 수 있습니다. 이제 li 항목의 인라인 블록은 것을 그들과 함께 중심으로 할 수 text-align:center;

ul { 
    display:block; 
    text-align:center; 
} 

li { 
    display:inline-block; 
}

바이올린 :

http://jsfiddle.net/CZ9pX/1/

출처

2013-08-14 08:25:02 koningdavid

당신은 단지에

text-align:center;

을주고있다

외부 컨테이너, 플로트를 사용하지 마십시오. display:block을 사용하십시오.

div{ text-align:center;display:block} 
div span{font-size:12px;}

이렇게하면 중간에 스팬이 표시됩니다.

출처

2013-08-14 08:47:48 Ankit

알 수없는 너비의 가운데에 맞춘 요소

답변

관련 문제