gpt4 book ai didi

html - 正确对齐图像与 HTML 和 CSS

转载 作者:太空宇宙 更新时间:2023-11-04 03:58:23 28 4
gpt4 key购买 nike

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

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

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

这里是一个例子的说明: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;
}

使用内联 block 是否是我想要实现的最佳实践?

如有任何帮助,我们将不胜感激。

最佳答案

我为您创建了一个 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>

样式.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 : HTMLCSS .

关于html - 正确对齐图像与 HTML 和 CSS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22458162/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com