요소의 중심 블럭 요소

요소의 중심 블럭 요소

블록 요소(이미지를 포함한 워드프레스 캡션 상자)를 가운데에 두려고 하는데 작동하지 않습니다.시도해 봤습니다.

.imagecenter {
   margin-left: auto;
   margin-right: auto;
   display: block;
}

하지만 안 될 겁니다.저도 노력했습니다.margin-left: auto; margin-right: auto;하지만 그것도 안 될 겁니다제가 잘못하고 있는 게 있나요?이것은 W3C 문서에 제가 해야 한다고 되어 있는 것입니다.

HTML에서는 다음과 같이 보입니다.

<div id="content">
........post here......
<div class="wpcaption imagecenter" style="width:225px">
<img src="blah" />
Blah.
</div>
.........post here......
</div>

나는 요소의 폭을 조절할 수 없습니다.사용자가 설정합니다.사용자는 div가 중심에 놓이기를 원합니다.그것은 효과가 없어요.서류를 검토해 보았지만 여전히 작동이 되지 않습니다.

편집: 이미 마진 레프트: 자동 및 마진 레프트: 자동. 작동하지 않습니다.

일반적으로 디바를 중앙에 배치하려면 왼쪽 여백과 오른쪽 여백을 모두 자동으로 만든 다음 디바 폭을 주는 기술이 있습니다.

.centerDiv
{
    margin-left:auto;
    margin-right:auto;
    width: XXX px;
}

그것의 부모의 폭보다 더 작은 폭을 주어라.

.parent    { }
.imgCenter { width:320px!important; margin:auto; }

<div class="parent">
  <img src="foobar.jpg" class="imgCenter" />
</div>

더 쉬운 해결책은 다음과 같이 설정하는 것입니다.margin-left: auto,margin-right: auto그리고.text-align: center(자막 텍스트의 경우) 포함 요소의 모든 하위 요소에 대해:

.imagecenter *{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

즉, 내용 요소의 너비를 명시적으로 설정할 필요는 없지만 캡션 텍스트의 너비가 100%이므로 더 이상하게 보일 수 있다는 단점이 있습니다.

이것이 오래된 질문이라는 것을 알고 있지만, 구글에서 이것을 찾은 사람들을 위해, 저는 또 다른 답을 찾았습니다.

이 속성들을 포장지 요소에 주면 내용물이 가운데 정렬됩니다.

width: 1024px; 
margin-left: auto;
/* I have used 1024px since I set the minimum resolution requirements for my website as 1024 x 768 */

언급URL : https://stackoverflow.com/questions/1207525/center-block-element-in-element