表格居中（垂直）答案

【问题标题】：Table centering (vertical)表格居中（垂直）
【发布时间】：2014-02-08 20:59:17
【问题描述】：

我想创建一个包含四张图片的入口页面作为我其他页面的链接。但我希望这些图片显示在监视器的中间（垂直和水平）。我已经尝试了很多东西，但我无法做到正确。我什至不能以任何方式垂直对齐图片（例如底部，正如您将在代码中看到的那样）。

你们知道解决这个问题的方法吗？这是我的代码：

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;
}

亲切的问候

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

看起来好像 tablecontainer 本身是居中的，但是容器中的内容仍然没有被那个 css 改变。也许如果您将居中元素添加到 tablerow div 它将解决问题。

这是我会尝试的：

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

【讨论】：

嗯，不。这实际上并没有做任何事情。

【解决方案2】：

你不需要桌子。 CSS就够了：

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

我为你创建了一个 jsfiddle：http://jsfiddle.net/tomaspolach/Q89f3/

【讨论】：

这很像我想要实现的。但我希望这些链接像这张图片一样站在一起：postimg.org/image/hfkrch00d 你想要这样做的方式似乎很乏味。我也想知道为什么我的方法行不通。你对此有什么解释吗？

【解决方案3】：

解决方案：我找到了解决问题的方法。代码如下：

<!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;
}

谢谢你们的启发！

【讨论】：