HTML/CSS의 가운데 텍스트 및 이미지

일부 텍스트 옆에 그림을 플로팅하려고합니다. 이것은 내가 얼마나 멀리 있고, 실제로 이미지를 배치하고 싶은지를 보여주는 화살표입니다.HTML/CSS의 가운데 텍스트 및 이미지

enter image description here

HTML

<!DOCTYPE html> 
    <head> 
    <title>Simple Page</title> 
    <link rel="stylesheet" type="text/css" href="css/test.css"> 
    </head> 
    <body>  
    <div class="content"> 
     <div class="cv"> 
     <p> 
      Some text<br> 
      Some more text<br> 
      etc etc<br> 
     </p> 
     <p> 
      <a href="mailto:[email protected]">[email protected]</a> 
     </p> 
     <p> 
      Download 
      &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-eng.pdf">eng</a> 
      &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-deu.pdf">deu</a> 
     </p> 
     </div> 
     <div class="photo"> 
     <img src="image/dummy.png" alt="dummy"> 
     </div> 
    </div> 
    </body> 
</html>

CSS (나는 다른 유래 답변을 따르려고했는데, 내가 정말 뭐하는 거지 이해할 수 없었다 것 같다)

body { 
    font-family: 'Lato', sans-serif; 
    font-weight: 300; 
    font-size: 150%; 
    line-height: 1.6em; 
} 
.cv { 
    display: table; 
    margin: 0 auto; 
} 
.photo { 
    float: right; 
}

모든 일반 평론가도 환영합니다. 또한 솔루션 코드 스 니펫이 아닌 배경 설명의 일부 단어에 감사드립니다. 감사.

출처

2014-04-21 hol

시도'.cv, .photo {디스플레이 : 인라인 블록; }'. – mdesdev

이렇게하면 텍스트와 이미지가 중심에 놓이게됩니다. – hol

아래 답변을 게시했습니다 ... – mdesdev

Demo

According to the HTML spec, <span> 인라인 요소이며 <div>가 블록 요소입니다. 이제이 display CSS 속성을 사용하여 변경할 수 있지만 하나의 문제가있다 :

<span>...<div>foo</div>...</span>

당신이를 변경하는 경우에도 엄격 유효하지 않습니다 : HTML 유효성 검사의 측면에서, 당신은 너무 인라인 요소 안쪽에 블록 요소를 넣을 수 없습니다 <div> ~ inline 또는 inline-block.

요소가 inline 또는 inline-block 인 경우 <span>을 사용하십시오. block 레벨 요소 인 경우 <div>을 사용합니다.

HTML

<div class="content"> 
    <span id="texxts"> 
     <div class="cv"> 
     <p> 
      Some text<br> 
      Some more text<br> 
      etc etc<br> 
     </p> 
     <p> 
      <a href="mailto:[email protected]">[email protected]</a> 
     </p> 
     <p> 
      Download 
      &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-eng.pdf">eng</a> 
      &nbsp;&nbsp;&nbsp;&nbsp;<a href="example-deu.pdf">deu</a> 
     </p> 
     </div> 
    </span> 
    <span> 
     <div class="photo"> 
     <img src="http://webjunction.net/images/avatars/default-avatar.png" alt="dummy"> 
     </div> 
    </span> 
</div>

CSS

.content { 
    margin-bottom:2%; 
    text-align: center; 
} 
.content span { 
    display: inline-block; 
    vertical-align: middle; 
} 
.content #texxts { 
    border: 1px solid red; 
    /* to show the centering */ 
} 
body { 
    font-family:'Lato', sans-serif; 
    font-weight: 300; 
    font-size: 150%; 
    line-height: 1.6em; 
} 
.cv { 
    display: table; 
    margin: 0 auto; 
} 
.photo { 
    float: right; 
}

출처

2014-04-21 10:32:33 4dgaurav

나는 왜 이것이 작동하는지 스스로 해결했다. 'block '이 무엇인지,'display' 속성이 무엇인지''inline'이 무엇을 의미하는지 이해하지 못했기 때문에 처음에는 약간 우둔감이었습니다. 당신의 대답과 다른 대답들이 나를 분류하는 데 도움이되었습니다. 나는 왜이 작품이 약간의 설명이 될 경우 귀하의 답변을 수락하고 싶습니다. 나는 지금까지 나 자신을 위해 그것을 알아 냈다. 그러나 나는 그것이 그 밖의 모두를 위해 당신의 대답의 가치를 증가시킬 것이다라고 생각한다. – hol

이제는 그것이 정당하다고 가정합니다. :) – 4dgaurav

'p'는 실제로 블럭 레벨 요소이지만 블럭 레벨 요소는 그 안에 중첩 될 수 없습니다. 'div'를'div' 안에 넣고 외부'div''를'display : inline'으로 설정하면 문제없이 HTML을 유효하게합니다. 게시물을 업데이트하여'p> div' 대신'span> div'를 사용하도록 권합니다. – Greggg

사진은 오른쪽으로 이동하지만 .cv 요소가 렌더링 된 후에 만 나타납니다. 따라서 float 종류는 마치 .cv 요소 뒤에 'enter'가있는 것처럼 동작하여 새 줄에 배치하고 그 줄의 오른쪽에 부동을 지정합니다. 그것은 당신이보고있는 것입니다, 사진은 .cv 요소 아래에 있지만 올바르게 올바르게 떠있었습니다.

수정하려면 .cv 왼쪽으로 부동 상태로 만들거나 .cv 요소의 현재 가로 가운데 맞춤을 해제하거나 HTML에서 .cv 요소 앞에 photo 요소를 넣을 수 있습니다. 이렇게하면 첫 번째 '선'에서 오른쪽으로 떠 다니고 .cv 요소를 같은 선상에 렌더링합니다. 당신은 또한 .cv 요소 내에 table-rows 및 table-cells을 사용하는 실제 코드를 제외하고 .cv 요소에 display: table는 아무 소용이고, 아마 제거해야

참고. 무슨 소용 그렇지 않으면 :

이

출처

2014-04-21 09:50:21 Greggg

여기에서 가져온'display : table' http://stackoverflow.com/questions/114543/how-to-center-a-div-in-a-div-horizontally – hol

동적 너비로 사용하고 있습니다. 너비가 넓어지면 그 옆에 아무 것도 (예 : 사진) 넣을 수 없게됩니다. 이를 방지하기 위해'max-width'를 추가하는 것이 좋습니다. – Greggg

답변 해 주셔서 감사합니다. 솔루션에 대한 올바른 방향으로 나를 가리키는 모든 답이 결합되었습니다. 당신의 대답에 내가 좋아하는 것은 제가 이해 한 언어 인 "새로운 라인"에 대해 설명하는 것이 었습니다. 궁극적 인 해결책은 두 div를 서로 옆에 만들고 "outer"div 텍스트를 가운데 정렬로 정렬하는 것이 었습니다. – hol

다음은 HTML의 조금 더 예뻐

<div class="content"> 
    <div class="cv"> 
    <p>Some text</p> 
    <p>Some more text</p> 
    <p>etc etc</p> 
    <p><a href="mailto:[email protected]">[email protected]</a></p> 
    <p>Download 
     <a href="example-eng.pdf" class="p-link">eng</a> 
     <a href="example-deu.pdf" class="p-link">deu</a> 
    </p> 
    </div> 
    <div class="photo"> 
    <img src="image/dummy.png" alt="dummy"> 
    </div> 
</div>

당신이 나란히 할 div 같은 수준의 요소를 차단하려는 경우 CSS

.content { 
    background: #fefefe; 
    width: 600px; 
    margin: 20px auto 0; /* margins - top | left/right | bottom */ 
    padding: 10px; 
    text-align: center; 
    border: 1px dashed #bbb; 
} 
.cv { 
    display: inline-block; 
    margin: 0 20px; 
} 
.photo { 
    position: relative; 
    display: inline-block; 
    width: 150px; 
    height: 200px; 
} 
.photo:after { 
    background: rgba(100,100,100,0.5); 
    position: absolute; 
    content: "Image description"; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 0; 
    padding: 10px; 
    color: #fff; 
    opacity: 0; 
    transition: all 0.4s linear; 
    box-sizing: border-box; 
} 
.photo:hover.photo:after { 
    height: 100%; 
    opacity: 1; 
} 
.photo img { 
    width: 100%; 
    height: 100%; 
} 
p { 
    text-align: left; 
    line-height: 23px; 
} 
.p-link { 
    margin-left: 10px; 
}

(인라인 것) 당신은 CSS propery display: inline-block;을 지정해야합니다. 그렇지 않으면 왼쪽으로 또는 왼쪽에서 첫 번째로 왼쪽에서 두 번째로 오른쪽으로 떠올리게하고 여백과 결합 된 너비, 패딩 및 경계는 컨테이너 내부 너비를 교차하거나 스택 될 수 없습니다 ag 다른 하나 위에. 어쨌든 여기가 FIDDLE

출처

2014-04-21 10:02:14 mdesdev

지금까지 감사드립니다. 그러나 텍스트와 이미지의 중심을 맞추는 방법은 무엇입니까? – hol

너비를 .content로 설정하고'margin : 0 auto'을 추가하면됩니까? –

@ ArturKäpp 예. – mdesdev

**Try this** 

.cv { 
    display: table; 
    margin: 0 auto; 
    float:left; 
} 
.photo { 
    float: left; 
    margin-top:80px; 
}

출처

2014-04-21 10:17:40

HTML/CSS의 가운데 텍스트 및 이미지

답변

관련 문제