1

所以我试图练习制作一个网站，我试图让文字在两张图片之间居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<div style=" margin-left:auto; margin-right:auto; text-align:center;">
<p>poo</p></div>

<div "float:left; margin-top:-33px;">>
<img     src="https://lh4.googleusercontent.com/-0kj0VRLro_o/AAAAAAAAAAI/AAAAAAAAAAA/8Aoyxk98YV0/s48-c-k/photo.jpg" width="297" height="241"/>


<div style="float:right; margin-top:-33px;">
<img src="http://i1.ytimg.com/vi/HdqsNykr9cM/mqdefault.jpg" height="187">
 </div>

抱歉，这是 wat-tier forum-ing 的奇怪间距

4

3 回答 3

0

你使用，<span>这将阻止你<div>作为<br>

于 2013-08-31T04:25:37.677 回答
0

首先，您的 html 标记存在一些问题：

  • 它的格式不正确，你缺少一个结束</div>标签

  • 你有没有style属性的内联样式，例如<div "float:left; margin-top:-33px;">应该是<div style="float:left; margin-top:-33px;">

  • ">>是无效的 html 标记

  • 尽可能不要使用内联样式。相反，创建一个单独的样式表并使用 css 类。

我创建了一个演示，在其中稍微清理了您的代码，并将两个图像之间的文本居中。一般的想法是float: left在您需要元素在页面上彼此相邻出现时使用。

于 2013-08-31T04:38:00.377 回答
0

关于您想要做的事情，您可以做两件事第一件事是创建一个div具有自动边距的父级，然后将您的文本和图像放入其中，并为您的文本和两个标签div赋予float:left属性，如下所示：(如果你父母的方向是默认的从左到右）divimgdiv

<div id="parent" style="margin: 0 auto 0">
    <div style="float:left"><img src="https://lh4.googleusercontent.com/-0kj0VRLro_o/AAAAAAAAAAI/AAAAAAAAAAA/8Aoyxk98YV0/s48-c-k/photo.jpg" width="297" height="241</div>
    <div style="float:left;text-align:center"><p>poo</p></div> //this is your text div
    <div style="float:left"><img src="http://i1.ytimg.com/vi/HdqsNykr9cM/mqdefault.jpg" height="187"</div>
</div>

div使用此技术，您可以通过为divs 提供所需的边距来纠正 s 之间的间距。

您可以做的另一件事是将所有divs 放在父元素中div（就像我上面显示的一样），但是这次给父元素一个display:relative属性，然后给您的子元素divs（文本和图像divs）绝对位置（position:absolute）为你渴望

（ps：我更喜欢我给你的第一个答案！）

于 2013-08-31T04:47:38.397 回答