이러한 스팬 요소를 세로로 정렬 할 수있는 방법이 있습니까?

JQuery Sortable 컨트롤을 스팬과 함께 사용하고 있는데, 이제 요소를 세로로 정렬하는 데 문제가 있습니다. 일반적으로 Div를 사용하여 패딩을 추가합니다. 이 경우 이미지가 중앙에 위치하지만 텍스트가 너무 낮아서 몇 픽셀 올릴 필요가 있습니다.이러한 스팬 요소를 세로로 정렬 할 수있는 방법이 있습니까?

  @foreach(var c in companies) 
      { 
       var company = c.Company; 
       <li class="ui-state-default"> 
        <span> 
        <img src="..\..\Content\img\udarrow.png"/> 
        </span> 
        <span> 
        @company 
        </span> 
       </li> 
      }

어떤 방법이 있습니까? CSS에서

출처

2012-07-12 Dave

정렬 가능을 사용하려면 span을 사용할 필요가 없습니다. 사실, 리를 사용할 필요조차 없습니다. 그것은 의미 론적으로 정확하지만 (아마도 당신이 물건 목록을 분류하고 있기 때문에) 반드시 필요하지는 않습니다. http://jsfiddle.net/4eHuy/ – solidau

을 참조하십시오.이 부분을 살펴보고이를 명심하십시오. 그러면 제 자리를 교정 할 것입니다. 감사. – Dave

.ui-state-default span { 
    display: block; 
}

출처

2012-07-12 00:15:29 Ruel

나는 당신의 대답을 upvoted,하지만 내 경우에는 작동하지 않는 것 같습니다. 요소가 쌓여서 float : left를 사용하면; width : 100px, Sortable 컨트롤은 헤이 와이어가됩니다. 죄송합니다, 이것은 또한 Sortable 컨트롤 문제라고 생각합니다. – Dave

'float : left;'는 요소가'block'으로 설정되어 있어도 서로 띄워지게 만듭니다. 출력물이 필요한 화면을 캡쳐 할 수 있습니까? – Ruel

음, 꽤 못 생겼지 만, 텍스트를 플로트에 넣었을 때 작동하도록 만들었지 만, 이미지는 그대로 두었습니다. 웬일인지 그것으로 괜찮습니다. 이제는 모두 잘 작동합니다. – Dave

봅니다 요소를 차단하도록 스팬 변환. 그들은 서로 인라인으로 배치해야하는 경우

.ui-state-default span { display: block; }

출처

2012-07-12 00:16:07 wdm

차라리 그들은 block보다 inline-block을 만들 것입니다. 그럼 마진이있는 바이올린 & 패딩.

출처

2012-07-12 00:18:50

인라인 블록으로 인해 블록과 동일한 문제가 발생합니다. Sortable 컨트롤이 내가하고 싶은 것을 방해하고 있다고 언급 했어야합니다. – Dave

이러한 스팬 요소를 세로로 정렬 할 수있는 방법이 있습니까?

답변

관련 문제