Question

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

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

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

亲切的问候

Answer 1

似乎表容器本身处于居中状态，但容器内的内容仍未受到该css的影响。也许如果你将中心元素添加到tablerow div，它将纠正问题。

以下是我要尝试的内容：

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

Answer 2

你不需要桌子。 css就足够了：

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

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

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

谢谢你们的灵感！

工作台中心（垂直）

3 个答案: