테이블 센터링 (수직)

4 개의 그림이있는 입력 페이지를 다른 페이지로의 링크로 만들고 싶습니다. 하지만이 그림을 모니터의 중간 (수직 및 수평)에 표시하고 싶습니다. 나는 꽤 많은 일을 시도했지만, 제대로 할 수는 없습니다. 심지어 어떤 방법 으로든 사진을 세로로 정렬 할 수는 없습니다 (예 : 코드에서 볼 수있는 것처럼 하단).테이블 센터링 (수직)

이 문제에 대한 해결책을 알고 계십니까? 여기에 내 코드 :

HMTL :

<!DOCTYPE html> 
<html> 
    <head> 
     <title>B-Music: Piano</title> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width"> 
     <link rel="stylesheet" type="text/css" href="piano.css"> 
    </head> 
    <body> 
     <div id="tablecontainer"> 
      <div id="tablerow"> 
       <div id="Column1"> 
       <div id="pianoleerkracht"> 
        <a href="Prijs&Contact.html" title="Pianoleerkracht"> 
         <img src="img/piano.jpg" alt="Pianoleerkracht"> 
        </a> 
       </div> 

       <div id="jezelf"> 
         <a href="Prijs&Contact.html" title="Jezelf"> 
         <img src="img/piano.jpg" alt="Jezelf"> 
         </a> 
       </div> 
      </div> 

      <div id="column2">  
       <div id="mij"> 
        <a href="Prijs&Contact.html" title="Mij"> 
         <img src="img/piano.jpg" alt="Mij"> 
        </a> 
       </div> 
       <div id="prijs&Contact"> 
        <a href="Prijs&Contact.html" title="Prijs en Contact"> 
         <img src="img/piano.jpg" alt="Prijs en Contact"> 
        </a> 
       </div> 
      </div> 
      </div> 
     </div> 

    </body> 
</html>

그리고 CSS :

body{ 
    background-color: brown; 
    height: 100%; 
} 

#tablecontainer{ 
    display: table; 
    border-spacing: 10px; 
    margin-left: auto; 
    margin-right: auto; 
    height: 100%; 
} 

#tablerow{ 
    display: table-row; 
    height: 100% 
} 

#column1{ 
    display: table-cell; 
    vertical-align: bottom; 
} 
#column2{ 
    display: table-cell; 
} 

img{ 
    width: 100px; 
    height: 100px; 
}

친절 감사

출처

2014-02-07 Barrie

그것의 tablecontainer 자체가 중심되는 것처럼 내 그러나 내용을 보인다 컨테이너는 그 CSS에 의해 온전히 남아있다. 아마도 tablerow div에 가운데 맞춤 요소를 추가하면 문제가 해결됩니다. 여기

내가 시도 할 것입니다 : 당신이 테이블이 필요하지 않습니다

#tablerow{ 
    display: table-row; 
    margin-left: auto; 
    margin-right: auto; 
    height: 100%; 
}

출처

2014-02-07 22:32:31

흠. 이것은 사실 전혀 anythign하지 않았다. – Barrie

. CSS는 충분하다 :

#pianoleerkracht { 
    position: absolute; 
    left: 25%; 
    top: 25%; 
    margin-left: -50px; 
    margin-top: -50px; 
}

내가 당신을 위해 jsfiddle을 만들어 : http://jsfiddle.net/tomaspolach/Q89f3/

출처

2014-02-07 22:36:03

이것은 내가 달성하기를 원하는 것과 같습니다. 그러나 나는이 이미지 에서처럼 링크가 함께 있기를 바란다. http://postimg.org/image/hfkrch00d/ 당신이 그것을하고 싶어하는 방식은 그것을 성취하기에는 상당히 지루한 것처럼 보인다. 왜 내 방식이 효과가 없는지 궁금합니다. 당신은 그것에 대한 explenation을 가지고 있습니까? – Barrie

솔루션 : 내가 문제에 대한 해결책을 발견했다.

<!DOCTYPE html> 
<html> 
    <head> 
    <title> 
     B-Music: Piano 
    </title> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="stylesheet" type="text/css" href="piano.css"> 
    </head> 
    <body> 
    <div id="Outer"> 
     <div id="Middle1"> 
     <div id="Inner1"> 
      <div id="pianoleerkracht"> 
      <a href="PrijsEnContact.html" title= 
      "Pianoleerkracht"><img src="img/piano.jpg" alt= 
      "Pianoleerkracht"></a> 
      </div> 
      <div id="jezelf"> 
      <a href="PrijsEnContact.html" title="Jezelf"><img src= 
      "img/piano.jpg" alt="Jezelf"></a> 
      </div> 
     </div> 
     </div> 
     <div id="Middle2"> 
     <div id="Inner2"> 
      <div id="mij"> 
      <a href="PrijsEnContact.html" title="Mij"><img src= 
      "img/piano.jpg" alt="Mij"></a> 
      </div> 
      <div id="prijsEnContact"> 
      <a href="PrijsEnContact.html" title= 
      "Prijs en Contact"><img src="img/piano.jpg" alt= 
      "Prijs en Contact"></a> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

그리고 물론 CSS : 여기 코드는

body{ 
    background-color: brown; 
    height: 100%; 
} 

#Tablecontainer{ 
    display: table; 
    border-spacing: 10px; 
    margin-left: auto; 
    margin-right: auto; 
    height: 100%; 
} 

#tablerow{ 
    display: table-row; 
    height: 100% 
} 

#column1{ 
    display: table-cell; 
    vertical-align: middle; 

} 
#column2{ 
    display: table-cell; 
} 

img{ 
    width: 100px; 
    height: 100px; 
} 
#Outer{ 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

#Middle1{ 
    display: table-cell; 
    vertical-align: middle; 
} 

#Middle2{ 
    display: table-cell; 
    vertical-align: middle; 
} 

#Inner1{ 
    float: right; 
    width: 120px; 
} 

#inner2{ 
    float: left; 
    width: 120px; 
}

는 영감을 너희들을 감사합니다!

출처

2014-02-08 12:59:17 Barrie

테이블 센터링 (수직)

답변

관련 문제