<分区>
html - 我正在尝试为我的网站水平对齐文本和图像
正如标题所暗示的，我正在尝试并排对齐以下图像和文本，但我似乎无法弄清楚如何做到这一点。
这是相关的 HTML:
<div class="projects">
<div class="img_description">
<a href="https://github.com/mdanb/alexaProject"> Proj 1</a>
<p>Answer misery adieus add wooded how nay men before though. Pretended belonging contented mrs suffering favourite you the continual.
Mrs civil nay least means tried drift. Natural end law whether but and towards certain. Furnished
unfeeling his sometimes see day promotion. Quitting informed concerns can men now. Projection to or up
conviction uncommonly delightful continuing. In appetite ecstatic opinions hastened by handsome admitted. </p></div>
<div class="project_image"><img src="dog.jpeg" width='250' height='250'></div>
</div>
以及相关的 CSS:
.projects {
width: 70%;
margin: 0px auto;
}
最佳答案
我不知道你是否在使用它，但或许可以看看 bootstrap。 https://getbootstrap.com/ .
在样式化 css 方面，Bootstrap 非常棒。 这是您要执行的操作的 Bootstrap 示例:
<div class="row">
<div class="col-3">
<img src="dog.jpeg" class="img-fluid">
<div>
<div class="col-9">
<a href="link"> Proj 1</a>
<p>
Answer misery adieus add wooded how nay men before though. Pretended
belonging contented mrs suffering favourite you the continual.
Mrs civil nay least means tried drift. Natural end law whether but and
towards certain. Furnished unfeeling his sometimes see day promotion.
Quitting informed can men now. Projection to or up conviction uncommonly
delightful continuing. In appetite ecstatic opinions hastened by handsome
admitted.
</p>
</div>
</div>
简单易行，bootstrap 会为您完成一切。
也就是说，也许您不想使用 Bootstrap ，那么您可以对当前的 HTML 设置执行以下操作。
<div class="projects">
<div class="project_image">
<img src="dog.jpeg" width='250' height='250'></div>
</div>
<div class="img_description">
<a href="link"> Proj 1</a>
<p>
Answer misery adieus add wooded how nay men before though. Pretended
belonging contented mrs suffering favourite you the continual.
Mrs civil nay least means tried drift. Natural end law whether but and
towards certain. Furnished unfeeling his sometimes see day promotion.
Quitting informed can men now. Projection to or up conviction uncommonly
delightful continuing. In appetite ecstatic opinions hastened by handsome
admitted.
</p>
</div>
</div>
.projects{
width: 70%;
margin: 0px auto;
}
.img_description,
.project_image{
width: 50%;
display: inline-block;
}
这也应该显示你的 div 彼此相邻
关于html - 我正在尝试为我的网站水平对齐文本和图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57347628/