如何在包含不同长度的文本的div中对齐标题？
如何在包含不同长度的文本的div中对齐标题？
提问于 2021-02-10 17:48:58
我有三个div，每个div包含一个头部快照图像和一个文本我的问题是头部快照根据div中的文本量移动到div的内部。如何修复div中的图像，使它们彼此水平对齐？我试图附加我的问题的图像，但我不允许some##标题##原因和我的代码中的图像无法运行，因为它们是本地图像。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.head-info {
display: flex;
justify-content: space-around;
align-items: center;
width: 500px;
margin: auto;
}
.head-info img {
width: 100px;
height: auto;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<section class="head-info">
<div class="one">
<img src="img-1.png" alt="">
<p>The AMA’s definitions of marketing and marketing research are reviewed and reapproved/modified every three years by a panel of five scholars who are active researchers.</p>
</div>
<div class="two">
<img src="img-2.png" alt="">
<p>Marketing is the activity, set of institutions, and processes for creating, communicating, delivering, and exchanging offerings that have value for customers, clients, partners, and society at large. (Approved 2017)</p>
</div>
<div class="three">
<img src="img-3.png" alt="">
<p>According to the Association of National Advertisers (ANA), influencer marketing focuses on leveraging individuals who have influence over potential buyers and orienting marketing activities around these individuals to drive a brand message to the
larger market.</p>
</div>
</section>
</body>
</html>
回答 3
Stack Overflow用户
发布于 2021-02-10 18:00:10
你能在你的代码中尝试下面的CSS吗？
section.head-info div {宽度: 50%；}
我希望它能帮助你。
Stack Overflow用户
发布于 2021-02-10 21:15:23
使用span而不是P标记。内联元素。对于所有div类1、2和3，使用类似于以下代码的代码：
.one, .two, .three {display: inline-flex;}Stack Overflow用户
发布于 2021-02-11 09:43:14
我已经找到了我的问题的解决方案。问题是，孩子的div与父母的身高不同，所以我给了父母一个高度，并将孩子的高度设置为父母身高的100%。我在父元素(绿色)和子元素(红色)中添加了边框，以帮助更好地将它们可视化。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.head-info {
display: flex;
justify-content: space-around;
align-items: center;
width: 500px;
height: 350px;
margin: auto;
border: 1px solid green;
}
.head-info img {
width: 100px;
height: auto;
margin-bottom: 10px;
}
.head-info div {
width: 50%;
}
.one,
.two,
.three {
height: 100%;
border: 1px solid red;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<section class="head-info">
<div class="one">
<img src="img-1.png" alt="">
<p>The AMA’s definitions of marketing and marketing research are reviewed and reapproved/modified every three years by a panel of five scholars who are active researchers.</p>
</div>
<div class="two">
<img src="img-2.png" alt="">
<p>Marketing is the activity, set of institutions, and processes for creating, communicating, delivering, and exchanging offerings that have value for customers, clients, partners, and society at large. (Approved 2017)</p>
</div>
<div class="three">
<img src="img-3.png" alt="">
<p>According to the Association of National Advertisers (ANA), influencer marketing focuses on leveraging individuals who have influence over potential buyers and orienting marketing activities around these individuals to drive a brand message to the larger market.</p>
</div>
</section>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66134501
复制相关文章
相似问题
腾讯云开发者
