如何在HTML和CSS中使文字与图片对齐
我试图使文本与图像对齐，如下图所示（中间留有空格）。从图片中可以看到，“ AVENUE FOR GROWTH”和“ NETWORKING OPTOUNITIES”文本分别靠近Man的手和钱包图片。因此，我需要编码一种方法，以使这些文本更接近其各自的图像。在左边。
这是页面的完整HTML和CSS：
/* img {
-webkit-filter: grayscale(100%) contrast(110%) blur(1px); Chrome, Safari, Opera
/* filter: grayscale(100%); */
.test {
width: 100%;
height: 700px;
background-size: cover;
background-image: url('//ehealth4everyone.com/wp-content/uploads/2019/07/Group-510.jpg');
text-align: center;
}
.clapimg{
max-width:70%;
float:left;
padding:10px;
}
.clapimg2{
max-width:30%;
/* float:right; */
padding:10px;
border-radius:50px;
}
.content{
margin-top:20%;
margin-left:20%;
color:white !important;
text-align:justify;
}
.btn-default{
background-color: #ffffff !important;
color:black;
}
.button{
background-color: #2372B7;
color: white;
display: block;
height: 40px;
line-height: 40px;
text-decoration: none;
width: 100px;
text-align: center;
border-radius: 5px;
}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #2372B7;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.drop {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #2372B7;
}
.collapsible:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}<p>[vc_row][vc_column][vc_column_text]</p>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="test">
<div class="row">
<div class="col-md-6">
<div class="content">
<h1 style="color:white; font-weight:bolder; line-height: normal;">HEALTH TECH</h1>
<h2 style="color:white; font-weight:300; line-height: normal;">INTERNSHIP</h2>
<p style="color:white; font-weight:300; font-size: 20px; padding-top:5%;">Seeking to develop technical skillset for innovation<br />in the health sector? Then this internship is for you.</p>
<p><a class="btn btn-default" href="//ehealth4everyone.com/health-tech-form/" target="_blank" rel="noopener noreferrer" style="color:black; font-weight:bold;">APPLY HERE</a></div>
</div>
</div>
</div>
<div class="container" style="padding-top:5%">
<p style="text-align:left; color:black; font-weight:300; font-size: 20px;">
We are looking for individuals who are result-oriented, goal-driven, self-motivated, focused and are seeking to develop their skillset through hard work and commitment.</div>
<div class="container" style="padding-top:5%; padding-bottom:5%;">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-8.jpg" class="clapimg"></div>
<div class="col-md-6">
<h6 style="color: black; font-weight: bold; font-size: 17px;">AVENUE FOR GROWTH</h6>
<p style="text-align:left; color:black; font-weight:300; font-size: 15px;">We are providing the opportunity for personal and career growth through mentorship and coaching.</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-9.jpg" class="clapimg"></div>
<div class="col-md-6">
<h6 style="color: black; font-weight: bold; font-size: 17px;">JOB OPPORTUNITIES</h6>
<p style="text-align:left; color:black; font-weight:300; font-size: 15px;">After the internship, successful interns would be given the opportunity to join our team<br><br /></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 ">
<div class="row">
<div class="col-md-6 col-sm-12">
<img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-10.jpg" class="clapimg"></div>
<div class="col-md-6 col-sm-12">
<h6 style="color: black; font-weight: bold; font-size: 17px; padding-top:5%;">NETWORKING OPPORTUNITIES</h6>
<p style="text-align:left; color:black; font-weight:300; font-size: 15px;">We are providing a platform and the opportunity to work with others in your field and make meaningful connections.</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-md-6">
<img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-11.jpg" class="clapimg"></div>
<div class="col-md-6 col-sm-12">
<h6 style="color: black; font-weight: bold; font-size: 17px; padding-top:5%;">PERFORMANCE-BASED STIPENDS</h6>
<p style="text-align:left; color:black; font-weight:300; font-size: 15px;">Stipends would be given to interns based on task completion and weekly performance.</div>
</div>
</div>
</div>
</div>
<div class="row" style=" background-color:#efefef; padding-top:5%; padding-bottom:5%;">
<div class="container">
<h3 style="color: black; font-weight: bold; font-size: 20px;">AREAS OF SPECIALIZATION</h3>
<div class="row" style="text-align:center;">
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-516.jpg" class="clapimg2" style="color: black; font-weight: 400;">PROGRAMMING</div>
</div>
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-515.jpg" class="clapimg2">DESIGN</div>
</div>
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-514.jpg" class="clapimg2">DEV-OPS</div>
</div>
</div>
<div class="row" style="text-align:center;">
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-511.jpg" class="clapimg2">DATA</div>
</div>
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-512.jpg" class="clapimg2">PUBLIC HEALTH</div>
</div>
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-513.jpg" class="clapimg2">SOFTWARE TESTING</div>
</div>
</div>
</div>
</div>
<div class="row" style="background-color:#ffffff; padding-top:30px; padding-bottom:5%;">
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 style="color: black; font-weight: bold; font-size: 20px;">WHO CAN APPLY</h3>
<p style="color:black; font-weight:300; font-size: 17px;">Absolutely ANYONE interested in learning<br />under any of the areas of specialization listed<br />above. No prior knowledge is required.<br />Just come willing to learn and work hard.</div>
<div class="col-md-6">
<h3 style="color: black; font-weight: bold; font-size: 20px; float: right;">INTERNSHIP REQUIREMENTS</h3>
<ul style="color:black; font-weight:300; font-size: 17px; float: right;">
<li>A Computer (preferably a Laptop)</li>
<li>A working internet connection</li>
<li>The willingness to learn</li>
</ul>
</div>
</div>
<button class="collapsible" style="border-radius:5px;">RULES</button>
<div class="drop">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<button class="collapsible" style="border-radius:5px;">FAQ</button>
<div class="drop">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<a href="//ehealth4everyone.com/health-tech-form/" target="_blank" rel="noopener noreferrer" style="margin:auto; text-align:center; display:block; font-weight:bold;" class="button">APPLY HERE</a>
<p>[/vc_column_text][/vc_column][/vc_row]</p>
3 个答案:
答案 0 :(得分：0)
尝试此代码，让我在完成后立即更新
.test {
width: 100%;
height: 700px;
background-size: cover;
background-image: url('//ehealth4everyone.com/wp-content/uploads/2019/07/Group-510.jpg');
text-align: center;
}
.clapimg{
max-width:70%;
float:left;
padding:10px;
}
.clapimg2{
max-width:30%;
/* float:right; */
padding:10px;
border-radius:50px;
}
.content{
margin-top:20%;
margin-left:20%;
color:white !important;
text-align:justify;
}
.btn-default{
background-color: #ffffff !important;
color:black;
}
.button{
background-color: #2372B7;
color: white;
display: block;
height: 40px;
line-height: 40px;
text-decoration: none;
width: 100px;
text-align: center;
border-radius: 5px;
}
/* Style the button that is used to open and close the collapsible content */
.collapsible {
background-color: #2372B7;
color: white;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the collapsible content. Note: hidden by default */
.drop {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #2372B7;
}
.collapsible:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}
body {
overflow-x: hidden;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="test">
<div class="row">
<div class="col-md-6">
<div class="content">
<h1 style="color:white; font-weight:bolder; line-height: normal;">HEALTH TECH</h1>
<h2 style="color:white; font-weight:300; line-height: normal;">INTERNSHIP</h2>
<p style="color:white; font-weight:300; font-size: 20px; padding-top:5%;">Seeking to develop technical skillset for innovation<br />in the health sector? Then this internship is for you.</p>
<p><a class="btn btn-default" href="//ehealth4everyone.com/health-tech-form/" target="_blank" rel="noopener noreferrer" style="color:black; font-weight:bold;">APPLY HERE</a>
</div>
</div>
</div>
</div>
<div class="container" style="padding-top:5%">
<p style="text-align:left; color:black; font-weight:300; font-size: 20px;">
We are looking for individuals who are result-oriented, goal-driven, self-motivated, focused and are seeking to develop their skillset through hard work and commitment.
</div>
<div class="container" style="padding-top:5%; padding-bottom:5%;">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-8.jpg" class="clapimg">
</div>
<div class="col-md-6">
<h6 style="color: black; font-weight: bold; font-size: 17px;">AVENUE FOR GROWTH</h6>
<p style="text-align:left; color:black; font-weight:300; font-size: 15px;">We are providing the opportunity for personal and career growth through mentorship and coaching.
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">
<img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-9.jpg" class="clapimg">
</div>
<div class="col-md-6">
<h6 style="color: black; font-weight: bold; font-size: 17px;">JOB OPPORTUNITIES</h6>
<p style="text-align:left; color:black; font-weight:300; font-size: 15px;">After the internship, successful interns would be given the opportunity to join our team<br><br />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 ">
<div class="row">
<div class="col-md-6 col-sm-12">
<img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-10.jpg" class="clapimg">
</div>
<div class="col-md-6 col-sm-12">
<h6 style="color: black; font-weight: bold; font-size: 17px; padding-top:5%;">NETWORKING OPPORTUNITIES</h6>
<p style="text-align:left; color:black; font-weight:300; font-size: 15px;">We are providing a platform and the opportunity to work with others in your field and make meaningful connections.
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="row">
<div class="col-md-6">
<img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-11.jpg" class="clapimg">
</div>
<div class="col-md-6 col-sm-12">
<h6 style="color: black; font-weight: bold; font-size: 17px; padding-top:5%;">PERFORMANCE-BASED STIPENDS</h6>
<p style="text-align:left; color:black; font-weight:300; font-size: 15px;">Stipends would be given to interns based on task completion and weekly performance.
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row" style=" background-color:#efefef; padding-top:5%; padding-bottom:5%;">
<div class="container">
<h3 style="color: black; font-weight: bold; font-size: 20px;">AREAS OF SPECIALIZATION</h3>
<div class="row" style="margin: 0 auto;">
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-516.jpg" class="clapimg2" style="color: black; font-weight: 400;">PROGRAMMING
</div>
</div>
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-515.jpg" class="clapimg2">DESIGN
</div>
</div>
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-514.jpg" class="clapimg2">DEV-OPS
</div>
</div>
</div>
<div class="row" style="margin: 0 auto;">
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-511.jpg" class="clapimg2">DATA
</div>
</div>
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-512.jpg" class="clapimg2">PUBLIC HEALTH
</div>
</div>
<div class="col-md-4">
<div>
<p><img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Group-513.jpg" class="clapimg2">SOFTWARE TESTING
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<h3 style="color: black; font-weight: bold; font-size: 20px;">WHO CAN APPLY</h3>
<p style="color:black; font-weight:300; font-size: 17px;">Absolutely ANYONE interested in learning<br />under any of the areas of specialization listed<br />above. No prior knowledge is required.<br />Just come willing to learn and work hard.
</div>
<div class="col-md-6">
<h3 style="color: black; font-weight: bold; font-size: 20px; float: right; text-align: right;">INTERNSHIP REQUIREMENTS</h3>
<ul style="color:black; font-weight:300; font-size: 17px; float: right; text-align: right; list-style: none">
<li>A Computer (preferably a Laptop)</li>
<li>A working internet connection</li>
<li>The willingness to learn</li>
</ul>
</div>
<div class="container">
<div class="row">
<button class="collapsible" style="border-radius:5px;">RULES</button>
<div class="drop">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<button class="collapsible" style="border-radius:5px;">FAQ</button>
<div class="drop">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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.</p>
</div>
<a href="//ehealth4everyone.com/health-tech-form/" target="_blank" rel="noopener noreferrer" style="margin:auto; text-align:center; display:block; font-weight:bold;" class="button">APPLY HERE</a>
</div>
</div>
答案 1 :(得分：0)
可以使用CSS Margin修复程序进行修复。快速内联更改将不适用于所有div，这是这样的：
<div class="col-md-6" style="margin-left:5em">
<img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-9.jpg" class="clapimg"></div>
和
<div class="col-md-6" style="margin-left:5em">
<img src="//ehealth4everyone.com/wp-content/uploads/2019/07/Mask-Group-11.jpg" class="clapimg"></div>
相应地更改“ em”。
我不确定，但是您也可以在clapimg中添加一个边距来解决此类所有图像的问题（而不是div修复）。
.clapimg{
max-width:70%;
float:left;
padding:10px;
margin:5em;
}
.clapimg2{
max-width:30%;
/* float:right; */
padding:10px;
border-radius:50px;
margin:5em;
}
您可以根据需要将em更改为px，但是em是可调整大小的单位，而不是px的固定大小。这样可以实现不同浏览器尺寸的可伸缩性。
this SO post中对边距和填充有很好的解释。
答案 2 :(得分：0)
@plom我尝试了5％的保证金保证金，这给了我分散的安排outc
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？