Question

我正在学习HTML5，我需要一些文字和图片。图像应位于左侧，文本应位于中心。我想要做的是我创建了一个div布局，我放置了图像和文本，但问题是文本是在中心但是下降到图像，而不是图像的同一侧..

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="header" style="height:110px;background-color:#383838;">
<img src="logo2.jpg" alt="AB" ></img>
<h1 style="text-align:center">A</h1>
<h2 style="text-align:center">B</h1>
</div>
</body>
</html>

jsFiddle of code http://jsfiddle.net/EVvG4/

Answer 1

自己动手，我不能用那个页面......

<!DOCTYPE html>
<div id="header" style="height:110px; width: 1024px; background-color:#383838; margin: 0 auto;">

<div id="img-container" style="position: absolute;">
    <img src="logo2.jpg" alt="AB" style=" width: 100px; margin: 0 auto;" />
</div>
<div id="both-container" style="width: 500px; margin: 0 auto;">
<div id="text-container" style="position: absolute;">
    <h1 style="text-align: center">A</h1>
    <h2 style="text-align:center">B</h2>
</div>
</div>
</div>

对于标题，如果要将其浮动在中心：

.header
{
    (fixed width) width: 1024px;
     margin: 0 auto;
}

然后，如果你想在其中浮动不同的东西，你有几种方法：

使用浮动：右/左样式
使用div positions：排名：绝对/相对......

定位选项：Learn CSS positioning

HTML5图像和文本不是在同一个地方倾斜

1 个答案: