Question

我有一个要更新的网站，更新之一是使中心的图像变大而不会导致文本和对齐方式发生变化。下面的图片是我正在努力的工作以及我要避免的工作。

基本上，我需要中间的徽标要大一些，而又不会弄乱文本的排列方式，但是每当我将其放大时，它都会将所有文本向下推，并使徽标脱离中心。下面是我正在处理的区域和图像的代码。

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;
}

Answer 1

我认为您可以使用“位置”方法来避免此问题，只需将父div的“位置”设置为“相对”，将“文本”的div设置为“绝对”，然后将文本设置为固定-最高价值。因此，当您增加图片的大小时，不会影响下方文本的位置。我制作了一个简单的程序供您参考：

<!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>

放大图像而不会弄乱格式

1 个答案: