스팬 요소를 가운데에 맞출 수 없습니다.

웹 페이지 상단에 세 개의 항목이 있습니다. 나는 그들이 왼쪽, 가운데, 오른쪽에 위치 할 것으로 기대한다. 그러나 중앙에있는 것은 깡충 뛰기입니다 (부분적으로 게임에서 늦게 만들어 졌기 때문에). 나는 운이없는 자동 마진 트릭을 시도했다. 상대 위치 지정을 시도했지만 완벽하게 중앙에 배치 할 수는 없습니다 (그리고 이웃을 그립니다). 아래의 전체 코드에서 "showInMiddle"를 중앙에 배치 할 수 있습니까? 해당 항목이 표시 되려면 로그인 버튼을 클릭해야합니다. 이상적으로는 페이지가 너무 좁지 만 정렬을 계속 유지하면 항목이 줄 바꿈됩니다 (왼쪽 또는 위로 모두 그리는 것이 아니라).스팬 요소를 가운데에 맞출 수 없습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <title>This is dumb</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script> 
</head> 
<body style="font-family: 'Segoe UI'; margin: 5px 20px;"> 

<header style="width: 100%"> 

<h4 id="showOnLeft" style="font-size: 1.1em; display: inline;">I'm the title</h4> 

<span id="showInMiddle" data-bind="visible: LoggedIn"> 
    I'm supposed to be in the middle with my two buttons. 
    <button>B1</button> 
    <button>B2</button> 
</span> 

<div id="showOnRight" style="display: inline; float: right"> 
    <form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post"> 
     <input type="text" placeholder="Username" /> 
     <input type="password" placeholder="Password" /> 
     <input type="submit" value="Login" /> 
    </form> 
    <form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post"> 
     <span>Howdy</span> 
     <input type="submit" value="Logout" /> 
    </form> 
</div> 

<nav><hr/></nav> 

</header> 

<script type="text/javascript"> 

    function LoginViewModel() { 
     var self = this; 
     self.LoggedIn = ko.observable(false); 
     self.login = function (formElement) { self.LoggedIn(true); }; 
     self.logout = function (formElement) { self.LoggedIn(false); }; 
    } 

    ko.applyBindings(new LoginViewModel()); 

</script> 

</body> 
</html>

출처

2012-05-18 Brannon

체크 아웃 http://jsfiddle.net –

테이블을 사용할 때 완벽하게 작동합니다. 누가 알았 겠어?

<!DOCTYPE html> 
<html> 
<head> 
    <title>This is dumb</title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://knockoutjs.com/js/knockout-2.1.0.js"></script> 

    <style type="text/css"> 
     table, tr, td, h4, div { margin: 0px; padding: 0px; } 
    </style> 
</head> 
<body style="font-family: 'Segoe UI'; margin: 5px 20px;"> 

<header style="width: 100%"> 

<table style="width: 100%; border-width: 0px;"> 
<tr> 
<td><h4 id="showOnLeft" style="font-size: 1.1em;">I'm the title</h4></td> 
<td> 
<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align: center;"> 
    I'm supposed to be in the middle with my two buttons. 
    <button>B1</button> 
    <button>B2</button> 
</div> 
</td> 
<td> 
<div id="showOnRight" style="text-align: right;"> 
    <form id="someLoginForm" style="display: inline;" data-bind="visible: !LoggedIn(), submit: login" action="" method="post"> 
     <input type="text" placeholder="Username" /> 
     <input type="password" placeholder="Password" /> 
     <input type="submit" value="Login" /> 
    </form> 
    <form id="someLogoutForm" style="display: inline;" data-bind="visible: LoggedIn(), submit: logout" action="" method="post"> 
     <span>Howdy</span> 
     <input type="submit" value="Logout" /> 
    </form> 
</div> 
</td> 
</tr> 
</table> 

<nav><hr/></nav> 

</header> 

<script type="text/javascript"> 

    function LoginViewModel() { 
     var self = this; 
     self.LoggedIn = ko.observable(false); 
     self.login = function (formElement) { self.LoggedIn(true); }; 
     self.logout = function (formElement) { self.LoggedIn(false); }; 
    } 

    ko.applyBindings(new LoginViewModel()); 

</script> 

</body> 
</html>

출처

2012-05-19 00:35:37 Brannon

사실, 나는 테이블을 제안하는 것이 훨씬 쉽지만 웹 개발자에게는 싫은 일이 있습니다. 하지만 개인적으로 걱정하지 마세요. 지금은 잘 작동합니다. :) – netrox

테이블이 모두 나쁘지는 않다 ... 내 생각에 하나의 레이아웃을 사용하여 전체 레이아웃을 빌드하는 것은 특정 브라우저와 특정 해상도에서 렌더링 할 때 문제가 발생한다. 그러나 레이아웃의 특정 부분에 테이블을 사용하고 피하기 위해 corectly로 코딩한다. 언급 된 결함은 대개 잘 작동합니다. 호환되는 방식으로 스타일을 지정하는 것보다 조금 더 까다 롭습니다. –

현재 HTML 표준은 표가 표 형식의 데이터 (스프레드 시트, 달력 등)를 전달하고 레이아웃으로 사용되지 않는다는 점을 강조합니다. 그러나 레이아웃, 소년, HTML 테이블은 매우 효과적이고 일관성 있고 직관적입니다. 모든 속성이 0으로 설정된 모든 브라우저에서 일관되게 작동합니다. 그러나 CSS3를 사용하면 어떤 요소를 "테이블"로 취급해야하는지 지정할 수 있습니다. 즉, "테이블"로 취급되는 요소로 레이아웃을 디자인 할 수 있습니다. 자세한 정보는 http://www.digital-web.com/articles/에서 확인할 수 있습니다. everything_you_know_about_CSS_Is_wrong / – netrox

기본적으로 너비를 알지 못하는 인라인 요소이기 때문에 범위를 가운데 맞춤 할 수 없습니다.

당신은 단순히이 같은 사업부와 범위를 대체 (인라인 CSS를 시청) 할 수 있습니다

<div id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center "> 
I'm supposed to be in the middle with my two buttons. 
<button>B1</button> 
<button>B2</button> 
</div>

이 빠른 - 내가 집에 가고 오프입니다. 로그인 양식과 관련된 너비를 조정 해보십시오. floatdiv의 합계가 컨테이너의 합계를 초과해서는 안되거나 잘못 될 것이라는 점을 알아야합니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <title> 
      This is dumb 
     </title> 
     <style> 
     #container { 
      width:900px; 
      margin: auto 0; 
      overflow: auto;   

     }   
     .floatdiv { 
      float:left; 

      margin:0;       

     } 

     </style>   

    </head> 

    <body style="font-family: 'Segoe UI'; margin: 5px 20px;"> 
    <div id="container"> 

      <div class="floatdiv" style="font-size: 1.1em; width:200px"> 
       I'm the title                 
      </div> 
      <div class="floatdiv" id="showInMiddle" data-bind="visible: LoggedIn" style="text-align:center; width:300px "> 

       <button> 
        B1 
       </button> 
       <button> 
        B2 
       </button>    
      </div> 
      <div class="floatdiv" id="showOnRight" style="width:300px; float:right; text-align:right"> 
       <form id="someLoginForm" style="" data-bind="visible: !LoggedIn(), submit: login" action="" method="post"> 
        <input type="text" placeholder="Username" /> 
        <input type="password" placeholder="Password" /> 
        <input type="submit" value="Login" /> 
       </form> 
       <form id="someLogoutForm" style="" data-bind="visible: LoggedIn(), submit: logout" action="" method="post"> 
        <span> 
         Howdy 
        </span> 
        <input type="submit" value="Logout" /> 
       </form> 
      </div> 

     </header> 
    </div>   

    </body> 

</html>

출처

2012-05-18 23:18:06 netrox

올바른지 만 조정할 수 있습니다. 이것을 참조하십시오 http://stackoverflow.com/questions/8792343/css-cannot-get-one-spanned-style-to-override-another-inherited-style-and-align –

이 해결책은 효과가 없습니다. 중간 요소를 자체 행에 배치 할뿐만 아니라 오른쪽 요소를 세 번째 행에 배치합니다. 세 줄을 같은 줄/줄에 모두 넣고 싶습니다. – Brannon

사실, HTML을 다시 작성해야합니다. 매우 쉽습니다. 그거보고 싶다? – netrox

스팬 요소를 가운데에 맞출 수 없습니다.

답변

관련 문제