Question

我目前正在为Kiosk风格的网站创建HTML / CSS布局。

但是，我遇到了一些问题，使图像和文本的对齐方式完全符合我的要求。

徽标和标题应固定在每个页面的相同位置，而我可能需要在屏幕上扩展按钮数量。

以下是一个示例的说明：Example Image，其中：

黑框代表徽标
蓝色框表示个别按钮

当前HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" type="text/css" href="style.css">
<html>
<body background="background.png"> 

<div id="logo">
    <img src="logo.png">
</div>

<br>

<div id="icons1">
    <img src="button-wmcweb.png"></a>
</div>

<div id="icons1">
    <img src="button-appointments.png"></a>
</div>

<div id="icons1">
    <img src="button-prescriptions.png"></a>
</div>

<br>

<div id="icons2">
    <img src="button-somccg.png"></a>
</div>

<div id="icons2">
    <img src="button-patient.png"></a>
</div>

<div id="icons2">
    <img src="button-nhschoices.png"></a>
</div>

</body>
</html>

CSS：

body {
text-align:center;
}

#mainContainer {
margin:0 auto;
} 

#icons1 {
  display: inline-block;
}

#icons2 {
  display: inline-block;
}

使用内联块是我尝试实现的最佳实践吗？

非常感谢任何帮助。

Answer 1

我为您创建了一个JSFiddle，并以您想要的为出发点。

Click for the full screen mode for the fiddle.

以下是完整的代码，以便于参考。

index.html：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body background="background.png">
        <div id="logo">
            <div id="logoimg">
                <img src="http://cs614926.vk.me/v614926650/93b6/n9S5OGKt8L0.jpg" />
            </div>
            <div id="logotext">lorem ipsum</div>
        </div>
        <div class="row"> <a href="http://stackoverflow.com/">
            <img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
            </a>  <a href="http://stackoverflow.com/">
            <img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
            </a>  <a href="http://stackoverflow.com/">
            <img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
            </a>

        </div>
        <div class="row"> <a href="http://stackoverflow.com/">
            <img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
            </a>  <a href="http://stackoverflow.com/">
            <img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
            </a>  <a href="http://stackoverflow.com/">
            <img src="http://cs614926.vk.me/v614926744/752f/eY60jo6aYo4.jpg" />
            </a>

        </div>
    </body>
</html>

style.css：

body {
    text-align: center;
}
#logoimg, #logotext, .row > img {
    display: inline;
}
#logo, .row {
    margin: 30px 10px;
    min-width: 1000px;
}
#logotext {
    min-width: 320px;
    vertical-align: top;
    font-size: 36px;
    padding: 0 20px;
}
img {
    width: 320px;
    resize: noresize;
}
a:link {
    text-decoration:none;
}

有关HTML / CSS的更多信息，请考虑查看以下w3school tutorials：HTML和CSS。

Answer 2

您的HTML在某些地方出错了。没有开放<a>代码，多个id's具有相同名称，而<link>代表css需要位于<head></head>代码中，如下所示。

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

这是你想要实现的目标吗？

http://jsfiddle.net/Q8gVL/

正确地将图像与HTML和CSS对齐

2 个答案: