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

Question

I'm working on a HTML page, and I've run into a little problem. Here's a picture about what I want: https://i.imgsafe.org/2c4d808.png

I've got a header section which contains the title and the picture, but I can't move the picture into the right side (red area) of the header.

I need to meet these conditions:

1. The title and the picture must be in the same div (header), however I can use nested divs in the header.

2. The title must be centered.

3. The picture must be completely on the right side of the header (both have a height of 100px).

The header is 800x100 px and the picture is 160x100 px.

I can modify anything in my HTML or CSS code.

Just to be clear: The header is with the "TITLE TITLE TITLE TITLE" and it is blue.

 #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

give the <div> that holds the text/img a position: relative;

then give the <img> a position: absolute; top: 0; right: 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>