% width div 안에 한 줄에 텍스트와 이미지를 가운데에 배치하는 방법은 무엇입니까?

나는 정말로 이것으로 어려움을 겪고 있으며 나는 그 이유를 모른다. 한 줄에 텍스트와 이미지가 있고 100 % 너비의 div 안에 가운데에 놓고 싶습니다. 여기% width div 안에 한 줄에 텍스트와 이미지를 가운데에 배치하는 방법은 무엇입니까?

http://jsfiddle.net/JnbeJ/

출처

2012-04-25 Dustin

왼쪽 float * 즉시 * 텍스트 정렬 센터를 사용하지 못하도록합니다. 요소를 플로팅하면 요소가 문서 흐름 외부로 렌더링됩니다. –

@JonathanRomer no. 아래의 건너 뛰기 참조 –

이러한 진술은 정확하지 않습니다. OP가 코드를 어떻게 설정했는지에 따라 float과 text-align을 사용할 수 있습니다. 내 대답을 보라. –

가 자동으로 블록 레벨이 될 요소를 떴다 ... 같은 시간에 중앙에의 .. jsfiddle입니다. text-align: center을 통해 센터를 배치하는 것은 불가능합니다. 여러분이 할 수있는 유일한 방법은 다음과 같이 인라인 블록을 만드는 것입니다 : display: inline-block. h이 맨 위에 올 수 있도록 vertical-align: top;을 추가했습니다. 작업 예제는 다음과 같습니다. http://jsfiddle.net/skip405/JnbeJ/4/

출처

2012-04-25 20:24:04 skip405

나를 이김 http://jsfiddle.net/JnbeJ/5/ –

래퍼 div를 사용하면 텍스트 정렬을 사용하여 콘텐츠를 가운데에 배치 할 수 있습니다. 래퍼 div도 너비가 필요하거나 인라인 블록으로 만들어야합니다. –

@Matt K,'text-align : center; '를 넣을 곳은별로 중요하지 않습니다. 그것은 계승되었습니다. 내 jsfiddle에서 볼 수 있듯이 나는 래퍼가 아니라'h1'과'img'를 중심에두고 있습니다. – skip405

귀하의 이미지와 텍스트는 왼쪽 뜨지 수

출처

2012-04-25 20:23:39 Neil

래퍼 div에 포함되어 있기 때문에 가능합니다. –

div가 100 % 너비입니다 (btw/div는 100 %로 시작 함). 100 % 너비 인 div도 가운데에 정렬하려고합니다. 내부 div에 너비를 넣거나 inline-block으로 만들 수 있습니다. 당신은 두 요소 만드는 그래서 대신에 "중심"클래스 이름의 래퍼 사용하는

Updated fiddle.

출처

2012-04-25 20:26:09

귀하의 경우 인라인 블록을 만들 것입니다'div'는 가운데 정렬됩니다 반면'h1'과'img'는'text-align : center'를 통해 해당 div 내에서 중심에 배치되지 않습니다. 녹색 배경을 가진 div가 가운데에 있고 그 내용이 아닌이 바이올린을보십시오. http://jsfiddle.net/skip405/JnbeJ/8/ – skip405

@ skip405, 중심에 있지 않기 때문에 중심에 있지 않습니다 ... 제 예제에서 h1은 유동적 인 너비이고 너비는 특정 너비입니다. 그것을 중심에 두십시오. 네가 여기서 논쟁하려고하는 것을 확신하지 못한다. –

제발, 내 CSS의 정확한 라인을 보여줘 "un-center"콘텐츠와 h1에 특정 폭이 주어진 정확한 라인을 표시합니다. – skip405

:; :

.centered {display: inline-block; margin: 0 auto;}

(디스플레이 인라인 블록), 그냥 래퍼의 스타일이 추가 또한 컨테이너 css에있을 필요가없는 추가 (text-align : center;)가 있습니다.

출처

2012-04-25 21:02:06

실제로 나도 마진이 필요하지 않습니다. 단지 .centered {display : inline-block;}이 트릭을 수행합니다. –

% width div 안에 한 줄에 텍스트와 이미지를 가운데에 배치하는 방법은 무엇입니까?

답변

관련 문제