作为学校作业的一部分，我正在使用 CSS 和 HTML 创建一个网站，但我不知道如何让我的文本和图像在页面中心整齐对齐。我想要的示例:https://chagaimweiss.com/
我一直在在线查找解决方案，但没有任何效果，而且我的代码让我更加困惑。 (我以前从未这样做过，我是一个绝对的初学者。)我发布了整个代码只是因为我担心某些元素可能会弄乱其他元素。
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%
}
body {
margin: 0;
font-size: 13px;
line-height: 1.6em
}
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: white;
text-align: center;
}
li {
display: inline;
}
li a {
display: inline-block;
color: grey;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #f3f3f3;
display: inline-block;
padding: 10px;
}
h1 {
font-family: Helvetica;
font-size: 80px;
font-weight: 400;
text-align: center;
}
img {
width: 400px;
border-radius: 70%;
}
center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
p {
overflow: hidden;
float: right;
clear: both;
}
.box {
display : flex;
justify-content : center;
align-items : center;
margin-left : 25px;
margin-right : 25px;
}
.text {
margin-right: 200px;
margin-left: 50px;
}<html lang="en">
<head>
<title>TITLE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">Resume</a></li>
<li><a href="contact.asp">Contact</a></li>
</ul>
<h1>Title</h1>
<div class="box">
<center>
<img src="Profile_photo.jpg" alt="Profile Photo"/>
<span style="p" class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</span>
</center>
</div>
</body>
</html>最佳答案
这可能是您要搜索的内容
.container {
display: flex; /* <--- This does the trick */
max-width: 860px; /* Limit the width */
margin: 0 auto; /* Centering the container */
font-size: 22px;
line-height: 2;
}
.responsive {
max-width: 100%;
height: auto;
}
.image-section {
width: 50%;
/* background: #3C86FF; */
}
.text-section {
width: 50%;
padding: 14px;
/* background: #8D3CFF; */
}<div class="container">
<div class="image-section"><img class="responsive" src="https://i.imgur.com/GuAB8OE.jpg" /></div>
<div class="text-section">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Recusandae adipisci ipsam eius sit nobis iure exercitationem officia quos earum eligendi?</div>
</div>关于html - 如何将图片和文字并排放置在页面中央？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58509753/