링크를 붙여 이미지를 중앙에 배치하다

링크를 붙여 이미지를 중앙에 배치하다

클래스 설정 시 이미지만 중앙에 배치할 수 있습니까?img부작용 없는 태그?문제는 다음과 같습니다.이미지 주위에 닻이 있어요.다음 CSS를 사용하는 경우

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

이 HTML(삭제)은 다음과 같습니다.

<a href="/path/to/image.jpg" class="fancybox" rel="fancybox" title="System">
    <img src="/path/to/image.jpg" title="System" class="aligncenter">
</a>

링크는 메인 div의 전체 폭을 차지합니다.즉, 이미지를 클릭할 수 있을 뿐만 아니라 이미지 주변의 공간(실제로는 전체 폭)도 클릭할 수 있습니다.이것은 CSS를 경유합니다.display: block.

부모 div를 사용하지 않고 이미지를 중앙에 배치하려면 어떻게 해야 합니까?나는 전체 영역을 클릭할 수 있는 것을 원하지 않는다.

배경:이 토픽을 읽어보실 수 있습니다.워드프레스와 빌트인 에디터에 관한 것입니다.그는 자동으로 클래스를 생성합니다.aligncenter이미지(사용자가 가운데 버튼을 누른 경우)에 표시됩니다.나만의 테마로 이게 필요해.모델레이터에 따르면 이것은 CSS 질문일 뿐 Wordpress의 코드 변경과는 관련이 없습니다.

aligncenter 클래스의 텍스트 정렬 추가: 센터

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}

워드프레스에 익숙하지 않지만 이미지 및 앵커의 css 'display' 속성을 'inline-block'으로 설정하는 것이 좋습니다.

문서의 DOM을 변경하는 데 제한이 있는 경우, 이미지에 'onClick' 속성을 추가하는 방법도 있습니다.
이미지를 클릭하면 몇 가지 기능을 실행할 수 있습니다.
예를 들어, 다른 페이지로 리다이렉트 하는 경우는, 다음과 같이 합니다.

<img src='myImg.png' onclick='myRedirect()' style='cursor:pointer'/>

페이지 머리글에는 다음과 같은 내용이 있습니다.

<script type='text/JavaScript'>
    var myRedirect = function(){
        window.location.href = 'Some other location';
    }
</script>

주의:style='cursor:pointer'마우스 커서를 '손' 커서로 변경합니다.

추가되는 것을 피하기 위해div컨테이너 또는 JavaScript를 사용하여 앵커를 블록으로 표시할 수 있습니다.

.logo {display: block; height: 115px; margin: 0 auto; width: 115px;}

/* height and width must equal your image's values */

<a href="#" class="logo"><img src="logo.png" alt="Logo" /></a>

라이브 데모: http://jsfiddle.net/performancecode/Ggk8v/

여전히 div를 포함하고 있지만, 내가 하는 방법은:

<div class="megaman">
<a href="img/megaman.jpg"><img src="img/megaman.jpg" alt="megaman"></a>
</div>



img {
height: 125px;
width: 200px;
}

.megaman{
text-align: center;
margin: 0 auto;
display: block;
}

그리고 네, 메가맨 록 때문에 .logo를 .megaman으로 바꿨어요!하지만 잘 될 거야나는 div를 사용하지 않고는 알아낼 수 없었다.

내가 찾은 해결책.추가 중/></a>앵커 태그까지의 폭과 높이가 이미지에 대한 하이퍼링크를 절단합니다.

<a class="link" href="URL" target="_blank"> <img width="75px" height="75px" alt="Facebook" src="IMAGE LOCATION"/></a>

두 번째 답변:
이것을 에 붙이다.functions.php

add_filter('image_send_to_editor','give_linked_images_class',10,8);
function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ) {
    // only do this on center
    if($align == 'center') {
        $html = str_replace('aligncenter', '', $html);
        $html = '<p style="width: 100%; text-align: center;" >'.$html.'</p>';
    }
    return $html;
}

아래쪽에서는 이미 삽입된 이미지에 영향을 주지 않습니다.
그리고 스타일도 좀 바꿔주시면 감사하겠습니다.<p>스타일시트로 이동합니다.

언급URL : https://stackoverflow.com/questions/10396490/center-an-image-with-a-link-on-it