PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Friday, November 18, 2022

[FIXED] How do I align multi line text vertically with background image set for :before

 November 18, 2022     css, html, pseudo-element, vertical-alignment     No comments   

Issue

I have a list of elements with icons added as background for :before. The text coming under the image when the title length is large.

enter image description here

How can I made the word services just below consultancy?

li>a {
  position: relative;
  display: block;
}

.submenu-icon:before {
  content: "";
  margin-right: 0px;
  background: url(/sites/all/themes/bootstrap_cck/images/sprites.png) no-repeat;
  background-size: 40em;
  background-position: -250px -184px;
  padding: 15px 40px 12px 15px;
  display: inline-block;
  vertical-align: middle;
  line-height: 47px;
  width: 55px;
  height: 47px;
}
<li class="first">
  <a href="Consultancy-professional-services" class="submenu-icon">Consultancy & Professional Services  </a>
</li>


Solution

You can use display: flex on a element.

a {
  align-items: center;
  display: flex;
  width: 300px;
  border: 1px solid black;
}

.submenu-icon:before {
  content: "PSEUDO";
  padding: 20px;
}
<a href="Consultancy-professional-services" class="submenu-icon">Consultancy & Professional Services  </a>

Or with background image it should look like this.

a {
  align-items: center;
  display: flex;
  width: 300px;
  border: 1px solid black;
}
.submenu-icon:before {
  content: "";
  background: url('http://images2.wikia.nocookie.net/__cb20100211112757/dexter/de/images/2/27/System-search.png') no-repeat;
  width: 40px;
  height: 40px;
  background-size: contain;
  margin: 15px;
}
<a href="Consultancy-professional-services" class="submenu-icon">Consultancy & Professional Services  </a>



Answered By - Nenad Vracar
Answer Checked By - Clifford M. (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing