CODEWITHSUNDEEP
htmlcss
user3386779
user3386779

Reputation: 7175

align image and text in same line

I want to display image and text 'offerings' in same line. div are generated in drupal. In source page code displayed as given below.

I have two images by default, hover image display none and menu image appear before hover. now displayed on two lines. Need to show in a single line.

.categoryMobileMenu {
  // display:none;
}

.categoryMenu {
  background-color: #663399;
  min-height: 110px;
  font size: 18px;
  color: #fff;
  text-align: center;
}

#sub_menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.categoryMenu li {
  list-style-type: none;
}

.menu-hover-image {
  display: none;
}

.categoryMenu a {
  color: #fff;
  font size: 12px;
}

.categoryMobileMenu li {
  list-style-type: none;
}

p {
  display: inline;
}

.menu-image {
  display: inline;
}

.field-content a {
  display: inline;
}
<div class=" col-sm-4 col-md-4 categoryMobileMenu">
  <a href="Offerings">
  </a>
  <li>
    <a href="Offerings">
      <div class="menu-image">
        <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div>
      </div>
      <div class="menu-hover-image">
        <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div>
      </div>
      <p></p>
    </a>
    <div class="field-content">
      <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div>
    <p></p>
  </li>

</div>

Upvotes: 0

Views: 192

Answers (5)

user4447799
user4447799

Reputation:

Although the li is invalid, applying 

display: flex;
align-items: center;

to it will solve the problem.

.categoryMobileMenu {
  // display:none;
}

.categoryMenu {
  background-color: #663399;
  min-height: 110px;
  font size: 18px;
  color: #fff;
  text-align: center;
}

#sub_menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.categoryMenu li {
  list-style-type: none;
}

.menu-hover-image {
  display: none;
}

.categoryMenu a {
  color: #fff;
  font size: 12px;
}

.categoryMobileMenu li {
  list-style-type: none;
  display: flex;
  align-items: center;
}

p {
  display: inline;
}

.menu-image {
  display: inline;
}

.field-content a {
  display: inline;
}
<div class=" col-sm-4 col-md-4 categoryMobileMenu">
  <a href="Offerings">
  </a>
  <li>
    <a href="Offerings">
      <div class="menu-image">
        <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div>
      </div>
      <div class="menu-hover-image">
        <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div>
      </div>
      <p></p>
    </a>
    <div class="field-content">
      <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div>
    <p></p>
  </li>

</div>

If you replace the li with a div, it will still do the job

.categoryMobileMenu {
  // display:none;
}

.categoryMenu {
  background-color: #663399;
  min-height: 110px;
  font size: 18px;
  color: #fff;
  text-align: center;
}

#sub_menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.categoryMenu  {
  list-style-type: none;
}

.menu-hover-image {
  display: none;
}

.categoryMenu a {
  color: #fff;
  font size: 12px;
}

.container {
  list-style-type: none;
  display: flex;
  align-items: center;
}

p {
  display: inline;
}

.menu-image {
  display: inline;
}

.field-content a {
  display: inline;
}
<div class=" col-sm-4 col-md-4 categoryMobileMenu">
  <a href="Offerings">
  </a>
  <div class="container">
    <a href="Offerings">
      <div class="menu-image">
        <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div>
      </div>
      <div class="menu-hover-image">
        <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div>
      </div>
      <p></p>
    </a>
    <div class="field-content">
      <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div>
    <p></p>
  </div>

</div>

Upvotes: 2

Unknown_Coder
Unknown_Coder

Reputation: 774

Just Update

.field-content a {
    display:inline;
  }

To

.field-content {
    display:inline;
    float:left;
  }

Check this 

<style>.categoryMobileMenu{
	 // display:none;
  }
  .categoryMenu{
	  background-color:#663399;
	  min-height: 110px;
	  font size : 18px;
      color : #fff; 
	  text-align:center;
	  
  }
  #sub_menu{
	 position:absolute; 
	left: 0;
    right: 0;
    bottom: 0;
	
  }
  .categoryMenu  li{
	      list-style-type: none;
  }
  .menu-hover-image{
	  display:none;
  }
  .categoryMenu  a {
	color:#fff;
	font size : 12px;
	}
  .categoryMobileMenu  li{
     list-style-type: none;
  }
  
  p{
    display:inline;
  }
.menu-image{
    display:inline;
  }  
  .field-content {
    display:inline;
    float:left;
  } </style>
  
 <div class=" col-sm-4 col-md-4 categoryMobileMenu">
	<a href="Offerings"></a><li><a href="Offerings">
		 <div class="menu-image"><div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div></div>
			<div class="menu-hover-image"><div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div></div>
			<p></p></a><div class="field-content"><a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div><p></p>
		</li>
	
  </div>

Hope it's works for you!

Upvotes: 0

Ahmed Ginani
Ahmed Ginani

Reputation: 6650

Please check this.

.categoryMobileMenu{
	 // display:none;
  }
  .categoryMenu{
	  background-color:#663399;
	  min-height: 110px;
	  font size : 18px;
      color : #fff; 
	  text-align:center;
	  
  }
  #sub_menu{
	 position:absolute; 
	left: 0;
    right: 0;
    bottom: 0;
	
  }
  .categoryMenu  li{
	      list-style-type: none;
  }
  .menu-hover-image{
	  display:none;
  }
  .categoryMenu  a {
	color:#fff;
	font size : 12px;
	}
  .categoryMobileMenu  li{
     list-style-type: none;
  }
  
  p{
    display:inline;
  }
.menu-image{
    display:inline;
  }  
  .field-content a{
    display:inline;
  }
  .offering-section{
      float: left;
  }
<div class=" col-sm-4 col-md-4 categoryMobileMenu">
	<a href="Offerings" >
		</a><li><a href="Offerings" class="offering-section">
		 <div class="menu-image"><div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div></div>
			<div class="menu-hover-image"><div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div></div>
			<p></p></a><div class="field-content"><a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div><p></p>
		</li>
	
  </div>

Upvotes: 0

user7898585
user7898585

Reputation:

Here is a simple solution, that involves floating the image to the left, so that everything is on the same line.

.categoryMobileMenu {
  // display:none;
}

.categoryMenu {
  background-color: #663399;
  min-height: 110px;
  font size: 18px;
  color: #fff;
  text-align: center;
}

#sub_menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.categoryMenu li {
  list-style-type: none;
}

.menu-hover-image {
  display: none;
}

.categoryMenu a {
  color: #fff;
  font size: 12px;
}

.categoryMobileMenu li {
  list-style-type: none;
}

p {
  display: inline;
}

.menu-image {
  display: inline;
}

.field-content a {
  display: inline;
}

.menu-image {
  float:left;
}
<div class=" col-sm-4 col-md-4 categoryMobileMenu">
  <a href="Offerings">
  </a>
  <li>
    <a href="Offerings">
      <div class="menu-image">
        <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div>
      </div>
      <div class="menu-hover-image">
        <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div>
      </div>
      <p></p>
    </a>
    <div class="field-content">
      <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div>
    <p></p>
  </li>

</div>

Upvotes: 0

athi
athi

Reputation: 1683

Added

.field-content {
  display: inline-block;
}


.categoryMobileMenu {
  // display:none;
}

.categoryMenu {
  background-color: #663399;
  min-height: 110px;
  font size: 18px;
  color: #fff;
  text-align: center;
}

#sub_menu {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.categoryMenu li {
  list-style-type: none;
}

.menu-hover-image {
  display: none;
}

.categoryMenu a {
  color: #fff;
  font size: 12px;
}

.categoryMobileMenu li {
  list-style-type: none;
}

p {
  display: inline;
}

.menu-image {
  display: inline;
}

.field-content a {
  display: inline;
}

.field-content {
  display: inline-block;
}
<div class=" col-sm-4 col-md-4 categoryMobileMenu">
  <a href="Offerings">
  </a>
  <li>
    <a href="Offerings">
      <div class="menu-image">
        <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon.png" width="55" height="47" alt=""></div>
      </div>
      <div class="menu-hover-image">
        <div class="field-content"><img typeof="foaf:Image" src="http://localhost/Website/sites/default/files/offering-icon-hover.png" width="55" height="47" alt=""></div>
      </div>
      <p></p>
    </a>
    <div class="field-content">
      <a href="Offerings"></a><a href="http://localhost/Website/services/dpcm/Offerings">Offerings</a></div>
    <p></p>
  </li>

</div>

Upvotes: 0

Related Questions