유체 레이아웃의 텍스트 가운데 맞추기

유동적 인/동적 인 레이아웃으로 이미지 사이에 특정 텍스트 요소를 중점적으로 배치해야하는 웹 사이트가 있습니다. 모든 것이 모두 훌륭하고 멋 스럽습니다. 텍스트 요소의 여백을 변경하면됩니다. 그러나 p 태그 내의 텍스트를 변경하면 이미지가 더 이상 정렬되지 않거나 텍스트가 더 이상 정렬되지 않습니다. 인접한 이미지 옆에 정확하게 가운데에 나타납니다. 내 "문제"유사유체 레이아웃의 텍스트 가운데 맞추기

JSFiddle : http://jsfiddle.net/3s4bhwg4/4/

이상적인 이미지를 경우 내 JSFiddle 올바른 보이지 않는다 :

enter image description here

가를 중심으로 동일한 결과를 달성하기 위해 더 유지 보수 방법이 있나요 텍스트 또는 여백을 사용하여이 정도까지 수용 가능/우수 사례로 간주 되는가?

저는 웹 디자인에 녹슨 것이므로 어떤 비판도 행복하게 생각합니다.

참고 : JSFiddle 너비의 크기를 조정하면 레이아웃이 깨지는 것 같습니다. 그러나 내 로컬 웹 페이지 크기를 조정하는 것은 일정하게 유지 ....

CSS :

#wrapper{ 

    MARGIN-LEFT: auto; 
    MARGIN-RIGHT: auto; 
    WIDTH: 100%; 

} 

.row{ 
    width: 100%; 
} 

/*Please execuse my use of left/right in naming my ids. */ 
#contentleft{ 
    float: left; 
    width: 60%; 
} 

#contentleft h1{ 
    margin: 30% 5% 0 40%; 
} 

#contentleft p{ 
    margin: 0 5% 0 40%; 
} 

#contentright{ 
    float: right; 
    width: 40%; 
} 

#contentright p{ 
    margin: 17% 30% 43% 10%; 
} 

img{ 
    width: 100%; 
}

HTML :

<div id="wrapper"> 
    <div class="row">Header</div> 
    <div id="contentleft"> 
     <IMG src="http://img2.wikia.nocookie.net/__cb20081223173835/uncyclopedia/images/7/7e/Mountain.jpg"></IMG> 

     <H1>Random.</H1> 

     <P> Both texts must be centered next to their adjacent images as well. </P>          
    </div> 

    <div id="contentright"> 

      <P>The margins of this text pushes the image down so it aligns with the corner of the other image. 
      </P> 
      <IMG src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg"></IMG> 
    </div> 
</div>

출처

2014-09-08 user3403227

세로 레이아웃을 선택한 이유가 있습니까? 왜 텍스트의 단락을 바꿔서 그들이 같은 관계에있는 이미지와 같은 div에 있는지, 그리고 자동으로 위아래 여백을 설정해야하는 이유는 무엇입니까? –

이미지를 기반으로하면 표가 제대로 작동하는 것처럼 보입니다. 세로 정렬 텍스트는 테이블 셀에서하는 것이 가장 쉽다. td에서'vertical-align = "middle"을 사용하면된다. 첫 번째 행에는 이미지가 있고 그 다음 셀에는 텍스트가 있고 두 번째 행에는 텍스트와 이미지가 있습니다. – JStephen

테이블이 아마도 최고이지만 divs 이미지를 사용하여 추가해야하고 p는 인라인 블록으로 포맷해야합니다. –

이 제안 나는 테이블을 사용하여 얻을 수있는 가장 가까운 @ Jstephen : JSFIDDLE

내가 작업을 수행 할 수있는 유일한 방법은 한 이미지의 크기를 조절하지 않는 것입니다. 그리고 나는 그들을 구석에서 정확히 만날 수 없었다.

EDIT : 하면 enter image description here I가 0의 1 픽셀까지의 높이와 투명도를 설정하고, 플로팅 첫번째 행 위의 셀 하부 이미지를 삽입하여 해킹 관리 해주기 올바르게 작동. 이것은 첫 번째 행이 테이블의 형식을 지정하는 데 사용되도록 테이블 레이아웃이 고정되어 있기 때문에 작동합니다. (숨겨진 이미지를 떠 다니면 텍스트의 가운데 맞춤은 영향을받지 않습니다.) 그런 다음 두 번째 이미지의 보이는 복사본의 너비를 100 %로 설정합니다.

td에 padding: 0;을 추가하고 표에 border-collapse: collapse;을 추가하여 모서리가 사진과 정확히 닿도록하십시오. (기본 패딩 것 같다되지 영)

그것은 한 텍스트의 높이가 (눈에 보이는) 이미지의보다 작은으로 작동

HTML

<body> 
    <div class="row">Header</div> 
    <table id="wrapper"> 
     <tr id="cont-top"> 
      <td> 
       <img src="http://img2.wikia.nocookie.net/__cb20081223173835/uncyclopedia/images/7/7e/Mountain.jpg" /> 
      </td> 
      <td> 
       <img src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg" /> 
       <p>The margins of this text pushes the image down so it aligns with the corner of the other image.</p> 
      </td> 
     </tr> 

     <tr id="cont-bottom"> 
      <td> 
       <h1>Random.</h1> 
       <p> Both texts must be centered next to their adjacent images as well. </p> 
      </td> 
      <td> 
       <img src="https://c1.staticflickr.com/5/4081/4811391918_7d607682b6_z.jpg" /> 
      </td> 
     </tr> 
    </table> 

</body>

CSS

#wrapper { 
    MARGIN-LEFT: auto; 
    MARGIN-RIGHT: auto; 
    height: 100%; 
    width: 100%; 
    table-layout: fixed; 
    border-collapse: collapse; 
    z-index: 0; 
} 
td, tr{ 
    padding: 0; 
    position: relative; 
} 
td{ 
    /*outline: 1px dotted red;*/ 
} 
.row { 
    width: 100%; 
     padding: 0.5em; 
     height: 4%; 
} 
/*top row********/ 
#cont-top { 
    height: auto; 
    margin: 0; 
    padding: 0; 
} 
    /*image*/ 
    #cont-top td:first-child { 
     width: 60%; 
    } 
    #cont-top img{ 
     width: 100%; 
     vertical-align: bottom; 
     z-index: 20; 
    } 
    /*text*/ 
    #cont-top td:last-child{ 
     padding: 0; 
    } 
    #cont-top td:last-child p { 
     margin: 0 10px; 
     vertical-align: central; 
    } 
    /*formatting hack*/ 
    #cont-top td:last-child img{ 
     width: 100%; 
     height: 1px; 
     line-height: 1px; 
     float: left; 
     /*opacity: 0;*/ 
    } 
/*bottom row********/ 
#cont-bottom { 
    height: auto; 
    position: relative; 
} 
    /*image*/ 
    #cont-bottom td:last-child { 
     vertical-align: top; 
    } 

    #cont-bottom img{ 
     vertical-align: top; 
     width: 100%; 
     left: 0; 
     z-index: 20; 
    } 
    /*text*/ 
    #cont-bottom td:first-child { 
     vertical-align: central; 
     padding: 0 10px; 
    }

출처

2014-09-09 06:20:17

유체 레이아웃의 텍스트 가운데 맞추기

답변

관련 문제