Question

我想将图像和文字对齐在中心。请参阅我的HTML代码

＆＃13;

.normal-div-border {
  border: 1px solid #0e0d0d1a;
  margin-top: 10px;
  padding: 11px;
}

.j-div {
  overflow: hidden;
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

.j-icon {
  float: left;
}

.img-span {
  float: left;
  margin-top: 16px;
}

＆＃13;

<div class="normal-div-border">
  <div class="j-div">
    <span class="img-span">
		 <img src="https://cdn2.iconfinder.com/data/icons/superheroes-set/128/ironman-2-32.png" class="j-icon">
		 </span>
    <h2 class="new-h2"> Test Heading </h2>
  </div>
  <p>testing...................................</p>

</div>

＆＃13;

听到我需要的是我需要安排测试标题和图像在中心。目前该图像与new-h2之间存在差距。如何解决这个问题。

实际上为了解决这个问题我使用

.j-div{
             overflow:hidden;
             width:50%;
             margin:0 auto;
             text-align:center;
         }

但这只是修复文本，而不是图像。

请帮忙。

Answer 1

而不是float:left使用display:inline-block;

＆＃13;

.normal-div-border {
  border: 1px solid #0e0d0d1a;
  margin-top: 10px;
  padding: 11px;
}

.j-div {
  overflow: hidden;
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

.j-icon, .new-h2  {
  display:inline-block;
  vertical-align:middle;
}

.img-span {
  display:inline-block;
  margin-top: 16px;
}

＆＃13;

<div class="normal-div-border">
  <div class="j-div">
    <span class="img-span">
		 <img src="https://cdn2.iconfinder.com/data/icons/superheroes-set/128/ironman-2-32.png" class="j-icon">
		 </span>
    <h2 class="new-h2"> Test Heading </h2>
  </div>
  <p>testing...................................</p>

</div>

＆＃13;

将图像和文本中心对齐在另一个div中

1 个答案: