Question

我不知道为什么，但是我无法使图像和文本垂直对齐。

<div class="adress">
   <img src="#">My adress
</div>

如果我使用display：flex然后使用align-items：center，则它不起作用，垂直对齐也不起作用（如果我设置display：table“）。

也许我缺少什么？

.adresa {line-height: 1.4; padding-bottom: 30px;}
.adresa img {float: left; width: 40px; margin-right: 15px !important;}

<div class="adresa">
<img src="https://image.ibb.co/g9yTN9/adresa.png" />Nušlova 2271/7<br>
158 00 Praha 5
</div>
<div class="adresa">
<img src="https://image.ibb.co/g9yTN9/adresa.png" />7227336777
</div>

谢谢。

Answer 1

您可以使用此代码

.adress{
    margin:0 auto;
    text-align:center;
}
.adress img{
    display:flex; 
    margin: 0 auto;
}

Answer 2

您可以使用flexbox，方法是将文字换行到p

.adresa {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
.adresa p {
    padding-left: 15px;
}

<div class="adresa">
  <img src="https://image.ibb.co/g9yTN9/adresa.png" />
  <p>Nušlova 2271/7<br>158 00 Praha 5</p>
</div>
<div class="adresa">
  <img src="https://image.ibb.co/g9yTN9/adresa.png" />
  <p>7227336777</p>
</div>

Answer 3

尝试一下！

<div class="adress">
  <span><img src="blah.jpg" /></span>
  <span>My adress</span>
</div>

div {
  display: table;
}

img {
  vertical-align: middle;
  display: table-cell;
}
span {
  vertical-align: middle;
  display: table-cell;
}

这是小提琴示例演示-http://jsfiddle.net/oraf8jg5/

Answer 4

Flexbox正常工作。

.adresa {
  line-height: 1.4;
  display: flex;
  align-items: center;
  border: 1px solid red;
}

.adresa img {
  max-width: 40px;
  margin-right: 15px !important;
}

<div class="adresa">
  <img src="https://image.ibb.co/g9yTN9/adresa.png" />Nušlova 2271/7<br> 158 00 Praha 5
</div>
<div class="adresa">
  <img src="https://image.ibb.co/g9yTN9/adresa.png" />7227336777
</div>

Answer 5

对我来说，它工作得很好

.adresa {
  line-height: 1.4;
  padding-bottom: 30px;
  display: flex;
  align-items: center;
}

.adresa img {
  width: 40px;
  margin-right: 15px !important;
}

无法使img和文本垂直居中

5 个答案: