q 태그를 수직으로 정렬

-1

현재 CSS에서 q 태그를 수직으로 정렬하려고하고 있지만 어떤 이유로 든 인용 부호가 정렬되지 않아 문제가 발생합니다. 문제의q 태그를 수직으로 정렬

q { 
    vertical-align: top; 
}

Here is an image : 여기에 문제의 코드의 관련 부분이다. 이 부분이 상호 작용하는 여러 부분과 관련된 복잡한 문제인지 여부는 알 수 없지만 그렇다면 여기 내 html 및 css 파일이 있습니다.

이 link 참조

인라인 레벨 '테이블 셀'요소 :
는

출처

2016-10-02 MegaZeroX

내가이 페이지는 주식 웹 프로그래밍 숙제이기 때문에 이것은을 downvoted지고 있다면 모르겠지만, 스택 오버 플로우와 같은 온라인 리소스를 사용하여 명확하게는, 모두 허용 어디에 허용됩니다 난 학교에 간다. – MegaZeroX

최소한의 HTML과 CSS를 붙여서 문제를 재현해야하기 때문에 downvote를 사용한다고 가정합니다. 그러나 귀하의 이미지는 q 태그 이상을 표시하고 있습니다. – Aaron

예 - [MCVE]를 확인하십시오. 스택 오버플로는 질문의 품질면에서 합리적으로 높게 설정합니다. 잠재적 인 응답자가 가능한 한 쉽게 만들고 더 나은 반응을 얻으실 수 있습니다. – Jeff

버티컬 정렬 속성에만 적용된다.

는

q { 
    display: inline; 
    vertical-align: top; 
}

출처

2016-10-02 20:00:27 Aschab

그럼, q 내부의 내용은 인라인이지만, 인 따옴표는 인라인이 아닙니다. 그렇다면 그것이 작동하지 않는 이유를 설명합니다. 안타깝게도 디스플레이 인라인 문제로 문제가 해결되지 않습니다. – MegaZeroX

코드가 이미 있습니다. jsfiddle 또는 코드 펜 예제를 만들 수 있습니까? 그런 식으로 쉽게 포크로 찍어서 알아낼 수 있습니다. – Aschab

좋아요, 나는 [here] (https://jsfiddle.net/MegaZerox/8fgkc8z4/) 사본을 만들었습니다. 그것은 이미지가 없지만 p 태그 안의 따옴표는 문제가있는 태그이므로 중요하지 않습니다. – MegaZeroX

대신 이미지에 왼쪽 플로트를 사용하려고 시도합니다.

img { 
 
    float: left; 
 
}

<p class="quote"> 
 
    <img src="http://placehold.it/50x50" alt="Fresh" /> 
 
    <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q> 
 
</p>

출처

2016-10-02 20:04:32 knutesten

이 방법이 효과적이지만 나중에 사용하기 위해 이상한 인용문을 우회하는 방법을 찾고 싶습니다. q 태그 전체를 세로로 정렬하고 싶습니다. – MegaZeroX

q 태그를 수직으로 정렬

답변

관련 문제