Question

我尝试将信封img与右侧文本放在同一行：

.ico{
float:left;
margin-right: 5px;
vertical-align: middle;

我做错了什么？

Answer 1

你应该在flex div中使用flex-basis，以便它们具有相同的标签。

Answer 2

使用display: inline-block而非浮动图片。

.ico{
    display: inline-block;
    margin-right: 5px;
    vertical-align: middle;
}

Answer 3

Float和vertical-align不同意（请参阅.ico{}规则）。

display:block和vertical-align不同意（请参阅img{}规则）。

您需要为float重置display和.ico。

vertical-align可以调整（你应该阅读/寻找specification）：

img.ico {
  float: none;
  display: inline-block;
  margin-right: 5px;
  vertical-align: -0.6em;/* or middle but you can tune this with any decimal value */
}

div {
  font-style: normal;
  font-family: sans-serif, Arial;
}

img {
  width: auto;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#con {
  background-color: #00ff14;
  justify-content: center;
}

#logo {
  background-color: #ff8900;
}

#menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  margin: auto;
  border-color: red;
  border-width: 0px;
  margin-top: 10px;
}

#tresc {
  margin: 10px 10px 10px 10px;
  height: 100%;
  padding-bottom: 20px;
  text-align: justify;
  text-justify: inter-word;
  justify-content: center;
  border-color: red;
  border-width: 1px;
  border: solid;
}

#stopka {
  background-color: gainsboro;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
}

#m1 {
  border-bottom: solid;
  border-top: solid;
  border-width: 2px;
  padding: 4px;
  border-color: greenyellow;
  -webkit-transition: border-color 1s;
}

#m1:hover {
  border-bottom: solid;
  border-top: solid;
  border-width: 2px;
  padding: 4px;
  border-color: red;
}

#tekst {
  line-height: 3px;
}

<div id="stopka">
  <div class="m3"><img src="https://sinshop.pl/upload/sinshop/allegro/envelope.png" class="ico"><span id="tekst">KONTAKT</span></div>
  <div class="m3"><img src="https://sinshop.pl/upload/sinshop/allegro/envelope.png" class="ico">WYSYŁKA</div>
  <div class="m3"><img src="https://sinshop.pl/upload/sinshop/allegro/envelope.png" class="ico">REGULAMIN</div>
  <div class="m3"><img src="https://sinshop.pl/upload/sinshop/allegro/envelope.png" class="ico">PŁATNOŚCI</div>
</div>

我还将<div id="m3">变为<div class="m3">。 Id每页只能使用一次。

Img和文本在div中的同一行

3 个答案: