我有一个要更新的网站，其中一项更新是在不改变文本和对齐方式的情况下放大中心的图像。下面的图片是我正在做的事情以及我想避免的事情。
基本上，我需要将中间的 Logo 变大而不影响文本的排列方式，但每当我将其变大时，它会将所有文本向下推，并将 Logo 从中心移开。下面是我正在处理的区域的代码和图像..
HTML
<div class="padding">
<div class="container">
<div class="row text-center mt-30">
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="text-icons" ><img src="images/<?php echo $icons[2]["icon_img"]; ?>"></div>
<div class="featureitem img-item">
<!-- <strong >Empowerment</strong> -->
<p class="">An innovative approach that drives the discovery of new medicines. By collaborating with Circuit Clinical’s network, we have empowered individuals to take charge of the journey to finding cures through their participation.</p>
</div>
</div>
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="text-icons-middle" >
<img src="images/<?php echo $icons[0]["icon_img"]; ?>">
</div>
<div class="featureitem img-item">
<!-- <strong >Engagement</strong> -->
<p class="">We are an Integrated Research Organization [IRO] dedicated to optimizing the clinical research experience by delivering a comprehensive research program into our physicians practices. We make clinical research more manageable with our dedicated team of research professionals who match clinical trials to a physician’s areas of interest, assist with patient recruitment and study visits while filing all regulatory requirements.</p>
</div>
</div>
<!-- <div class="border"></div> -->
<div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
<div class="text-icons" ><img src="images/<?php echo $icons[1]["icon_img"]; ?>"></div>
<div class="img-item">
<!-- <strong >Enablement</strong> -->
<p class="">Transforms the experience of finding and participating in clinical trials for patients everywhere. It empowers prospective patients to confidently select a trial site trusted by their peers. Sites, sponsors and CROs leverage TrialScout<sup>TM</sup> to share their story and engage patients to consider participating in their trials.</p>
</div>
</div>
<!-- <div class="border"></div> -->
<div class="col-md-1"></div>
</div>
</div>
</div>
CSS
.text-icons img{
clear: both;
height: auto;
max-width: 300px;
margin: 0 auto;
margin-bottom: 15px;
margin-top: 15px;
}
.text-icons-middle img{
clear: both;
height: auto;
max-width: 300px;
margin: 0 auto;
margin-bottom: 15px;
margin-top: 15px;
}
最佳答案
我认为你可以使用“position”方法来避免这个问题，只需将parent div的“position”设置为“relative”，将“text”的div设置为“absolute”，然后将text设置为固定的-最高值(value)。所以当你增加图片的大小时，它不会影响下面文字的位置。我做了一个简单的程序供大家引用:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<style>
#parent_div{
position: relative;
}
#div_image{
position: absolute;
top:0px;
left:0px;
background-color: green;
height:100px;
width: 300px;
}
#div_text{
position: absolute;
top:150px;
left:0px;
size:5px;
height:100px;
width: 300px;
}
#button{
position: absolute;
left:400px;
}
</style>
</head>
<body>
<div id="parent_div">
<div id="div_image">
<img src="">
<div>
<div id="div_text">
Basically, I need the logo in the middle to be larger without messing with how the text is lined up, but whenever I make it larger it pushes all the text down and takes the logo out of the center. Below is the code for the area I'm working on and the images..
</div>
</div>
<button id="button" type="button" onclick="inc_size()">Increase size</button>
<script>
function inc_size(){
var test = document.getElementById("div_image").style.height = "150px";
}
</script>
</body>
</html>
关于html - 在不影响格式的情况下放大图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51549325/