我不知道如何在文本下方获取此图像。
<h1>OUR Services</h1>
<p>DESIGN CONTRACT
Examples
Starting from $1,800…
It all starts with your vision. We develop that vision and help you
shape it into reality. That development starts with a plan. Our Design
Contracts are detailed, comprehensive and collaborative. <img
src="design.png" alt="house example"></p>
</div>
浮动，中间对齐是我尝试过的。
我只想要文本下方的图像！也许它认为我要求一条胳膊和两条腿。https://i.stack.imgur.com/xQLra.jpg
https://codepen.io/admitdefeat/pen/BEyMzK
只需定义属性display
img{
display: block;
}
或
更改标记结构
<p>DESIGN CONTRACT
Examples
Starting from $1,800…
It all starts with your vision. We develop that vision and help you shape it into reality. That development starts with a plan. Our Design Contracts are detailed, comprehensive and collaborative. </p>
<img src="https://tinypng.com/images/example-shrunk.png" alt="house example" />
如果你想要一些简单而不是那么复杂的东西，我认为表格是一个不错的选择
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY BGCOLOR=Coral>
<TABLE BORDER=0 ALIGN=CENTER>
<TR>
<TD ALIGN=CENTER><FONT SIZE=5>OUR Services</FONT></TD>
</TR>
<TR>
<TD ALIGN=CENTER>DESIGN CONTRACT Examples Starting from $1,800... it all starts whit your<br>vision.We develop the vision and help you shape it into reality.That<br>development starts with a plan. Our Design Contracts are detailed.</TD>
</TR>
<TR>
<TD ALIGN=CENTER><IMG SRC="C:UsersmartiDesktopHtmlf43fc3ced583705f36926b6c9ebf3222--pearler-beads-fuse-beads.jpg"></TD>
</TR>
<TR>
<TD ALIGN=CENTER>comprehensive and collaborative</TD>
</TR>
</TABLE>
</BODY>
</HTML>
我用图像尝试了你的代码，它工作得很好。我没有更改您的主代码，我更改的只是图像。希望这在某种程度上对您有所帮助！
body {
color: #454547;
font-family: "Basier";
font-size: 1.2rem;
-webkit-font-smoothing: antialiased;
line-height: 1.9rem;
}
html {
background-color: #fdfaeb;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
box-sizing:border-box;
}
.en{
background: url(summer.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
box-sizing:border-box;
}
.container{
position: relative;
top: 200px;
box-sizing: inherit;
width: 37%;
margin: 0px auto;
background: #fdfaeb;
color: #2f3036;
text-align: center;
}
div {
display: block;
}
@font-face {
font-family: "Basier";
src: url("basiersquare-regular-webfont.ttf");
}
header {
position: relative;
}
.logo {
position: absolute;
left: 10px;
width: 150px;
height: 140px;
float: left;
}
#menu {
position: absolute;
right: 10px;
}
/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 0 px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Basier";
color: #2f3036;
background: #fdfaeb;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #F4D03F;
}
/*Style for dropdown links*/
li:hover ul a {
background: #F4D03F;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #fdfaeb;
color: #2f3036;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Basier";
text-decoration: none;
color: #F4D03F;
background: #fdfaeb;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
display: block;
}
/*Responsive Styles*/
@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CLT Designs Home Remodeling & Renovations</title>
<link href="hoise.ico" rel="shortcut icon" type="image/x-icon">
<meta charset="utf-8">
<link href="designs.css" rel="stylesheet">
</head>
<body>
<img class="logo" src="https://www.flowersbylindsey.com/catalog/view/theme/shoppica2/image/po_gallery/po-gallery-square-200_.png" alt="logoclt">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li><a href="thahomepage.html">Home</a></li>
<li><a href="ABOUT.html">About</a></li>
<li>
<a href="Services.html">Services</a>
<ul class="hidden">
<li><a href="Design.html">What is Design + Build?</a></li>
<li><a href="#">Our Process</a></li>
</ul>
</li>
<li><a href="Portfolio.html">Portfolio</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
<div>
<div class="container">
<h1>OUR Services</h1>
<p>DESIGN CONTRACT
Examples
Starting from $1,800…
It all starts with your vision. We develop that vision and help you shape it into reality. That development starts with a plan. Our Design Contracts are detailed, comprehensive and collaborative. <img src="https://www.flowersbylindsey.com/catalog/view/theme/shoppica2/image/po_gallery/po-gallery-square-200_.png" alt="house example"></p>
</div>
</div>