How can I center text vertically in list and keep it aligned during linebreak?-CodePudding

I'm having a quite simple issue which I hope you could help me solve. Basically I have a list with columns and I want each <li> to contain an image with text next to it. I want this text to be vertically centered and to align properly if linebreak.

I tried to keep text and image inside of the same <li> in line while allowing text to break with

white-space: nowrap;   overflow-wrap: break-word;

but without luck :o(

Currently my result is in the top and what I want is in the bottom of following screenshot: https://i.stack.imgur.com/Z81jZ.png

Hope you can help me - thanks a lot in advance :-)

.infoikon {
  width: 40px;
  padding-right: 5px;
  margin-bottom: -14px;
}
  
.ikontext {
  font-size: 12px;
  padding-left: 5px;
  line-height: normal;
  display: inline-block;
}
  
.infocon {
  padding-top: 20px;
  pointer-events: none;
  vertical-align: super;
  display: inline-block;
  white-space: nowrap;
  overflow-wrap: break-word;
}  

.ikonlist {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));
}

<ul >
<li > <img  src="{{ 'intensity.svg' | asset_url }}" ><div > {{product.metafields.global.Intensitet }}</div></li>
<li > <img  src="{{ 'material.svg' | asset_url }}" ><div > {{ product.metafields.global.Materiale }}</div></li>
<li > <img  src="{{ 'pattern.svg' | asset_url }}" ><div > {{ product.metafields.global.Moenster }}</div></li>
<li > <img  src="{{ 'wash.svg' | asset_url }}" ><div > {{ product.metafields.global.Opvaskemaskine }}</div></li>
<li > <img  src="{{ 'waterproof.svg' | asset_url }}" ><div > {{ product.metafields.global.Vandtaet }}</div></li>
<li > <img  src="{{ 'electricity.svg' | asset_url }}" ><div > {{ product.metafields.global.Stroem }}</div></li>
<li > <img  src="{{ 'air.svg' | asset_url }}" ><div > {{ product.metafields.global.Signal }}</div></li>
<li > <img  src="{{ 'puls.svg' | asset_url }}" ><div > {{ product.metafields.global.Puls }}</div></li>
<li > <img  src="{{ 'balance.svg' | asset_url }}" ><div > {{ product.metafields.global.Balance }}</div></li>
<li > <img  src="{{ 'blomst.svg' | asset_url }}" ><div > {{ product.metafields.global.Blomst }}</div></li>
<li > <img  src="{{ 'mund.svg' | asset_url }}" ><div > {{ product.metafields.global.Diskret }}</div></li>
<li > <img  src="{{ 'ergo.svg' | asset_url }}" ><div > {{ product.metafields.global.Ergo }}</div></li>
<li > <img  src="{{ 'partner.svg' | asset_url }}" ><div > {{ product.metafields.global.Partner }}</div></li>
<li > <img  src="{{ 'eye.svg' | asset_url }}" ><div > {{ product.metafields.global.Eye }}</div></li>
</ul>

CodePudding user response：

Kindly use below css

.ikonlist {
  list-style: none;
  padding-left: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(150px, 1fr));
}
  
.infocon {
  padding-top: 20px;
  pointer-events: none;
  display: flex;
  align-items: center;
}

.infoikon {
  width: 40px;
  padding-right: 5px;
}
  
.ikontext {
  font-size: 12px;
  padding-left: 5px;
}