CODEWITHSUNDEEP
htmlcss
Dreams
Dreams

Reputation: 8506

How to make this image and text center and vertical-align of div?

#confirm {
	background-color: #FFAE00;
	width:80%;
	height: 5em;
	margin: 0 auto;
}
<div id="confirm">
  <img  src="http://i.imgur.com/mdb6Noh.png">
  <span>Confirm</span>
</div>

How to make this image and text center and vertical-align of div?

Upvotes: 1

Views: 106

Answers (4)

Kapil
Kapil

Reputation: 1141

please use image as vertical align in middle in css rule

like 

#confirm{
  text-align:center;
}
#confirm img{
    vertical-align:middle;
}

Upvotes: 1

ketan
ketan

Reputation: 19341

Use display:flex to parent div. and give justify-content: center; and align-items: center; to make them center.

#confirm {
    align-items: center;
    background-color: #ffae00;
    display: flex;
    height: 5em;
    justify-content: center;
    margin: 0 auto;
    width: 80%;
}
<div id="confirm">
  <img  src="http://i.imgur.com/mdb6Noh.png">
  <span>Confirm</span>
</div>

Edit:

You can use display:inline-block if you don't want to use display:flex.

#confirm {
    background-color: #ffae00;
    height: 5em;
    margin: 0 auto;
    text-align: center;
    width: 80%;
}

img {
    display: inline-block;
    vertical-align: middle;
}


span {
    display: inline-block;
    vertical-align: middle;
}
<div id="confirm">
  <img  src="http://i.imgur.com/mdb6Noh.png">
  <span>Confirm</span>
</div>

Upvotes: 1

JavidRathod
JavidRathod

Reputation: 483

Please use below CSS : 

 #confirm {
	  background-color: #ffae00;
    display: table;
    margin: 0 auto;
  }
  #confirm span{
    display: table-cell;
    margin: 0 auto;
    vertical-align: middle;
    width: 80%;
  }
  #confirm img{
     display: table-cell;
     float: left;
     margin-right: 20px;
  }
<div id="confirm">
  <img  src="http://i.imgur.com/mdb6Noh.png">
  <span>Confirm</span>
</div>

Upvotes: 1

Sinto
Sinto

Reputation: 3997

are you looking to do this:

<style>
#confirm {
background-color: #FFAE00;
width:80%;
margin: 0 auto;
}
</style>
<div id="confirm">
<div style="clear:both; margin-right:40px"><img src="http://i.imgur.com/mdb6Noh.png"></div>
<span>Confirm</span>
</div>

Upvotes: 1

Related Questions