如何使用 HTML 和 CSS 将图像定位在居中对齐的标题右侧

Question

我正在处理 HTML 页面，但遇到了一个小问题。 这是我想要的图片： https : //i.imgsafe.org/2c4d808.png

我有一个包含标题和图片的标题部分，但我无法将图片移动到标题的右侧（红色区域）。

我需要满足以下条件：

1. 标题和图片必须在同一个 div（标题）中，但是我可以在标题中使用嵌套的 div。

2. 标题必须居中。

3. 图片必须完全位于标题的右侧（两者的高度均为 100 像素）。

标题为 800x100 像素，图片为 160x100 像素。

我可以修改 HTML 或 CSS 代码中的任何内容。

需要明确的是：标题带有“TITLE TITLE TITLE TITLE”，它是蓝色的。

 #container{ width: 800px; height: auto; margin-left: auto; margin-right: auto; margin-top: 10px; padding: 10px; background-color: #cccccc; box-shadow: 0px 0px 20px black; } #header{ height: 100px; background-color: #6495ED; } #menu{ width: 150px; height: 400px; background-color: #FFD700; float: left; } #main{ width: 650px; height: 400px; background-color: #00FF00; float: right; } #footer{ height: 80px; clear: both; background-color: #6495ED; } #footerwords{ float: right; } #headerpics{ positioning: absolute; top: 0px; } ul{ font-size: 1.5em; font-family: arial; }

 <div id="container"> <div id="header"> <h1><center>TITLE TITLE TITLE TITLE</center><h1> <div id = "headerpics"> <img src="http://placehold.it/160x100/E8117F/ffffff/?text=Books" /> </div> </div> <div id = "main">xx t xx </div> <div id = "menu"> <ul> <li><a href = "index.html">1111111</a></li> <li><a href = "#">2222222</a></li> <li><a href = "#">33333333</a></li> <li><a href = "#">4444444</a></li> <li><a href = "#">5555555</a></li> </ul> </div> <div id = "footer"> <div id = "footerwords"> <strong></br>footer........<strong> </div> </div> </div>

Answer 1

给保存 text/img 的 <div> 一个位置：relative;

然后给 <img> 一个位置：绝对； 顶部：0； 右：0；

 h1 { text-align: center; } .masthead { position: relative; height:139px; background-color: #9cc; } .masthead-img { position: absolute; right: 0; top: 0; }

 <div class="masthead"> <h1>This is My Title</h1> <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/139.jpg" alt="" class="masthead-img" /> </div>