CODEWITHSUNDEEP
htmlcss
Muhammet Can TONBUL
Muhammet Can TONBUL

Reputation: 3538

Span align center with img tag

I think it's so easy, but i'm stucked. What I want to do is centering the text "Some Text" according to the picture on the left. When I wrote the code used to center the div in the div below, the change did not take effect. There is something I have not seen, something I missed. I'm glad you helped me.

margin:auto;
width:50%;

Now enter image description here

What i want

enter image description here

.liTitle{
     padding:10px;
     background-color:#C4161A;
     color:white;
     cursor:pointer;
}
.liText{
  margin:auto;
  width:50%;
}
<div class="liTitle">
<img src="http://www.denizli.bel.tr/userfiles/image/icon/nobetcieczane.gif" width="24" height="24">
<span class="liText">Some Text</span>
</div>

Upvotes: 1

Views: 359

Answers (4)

UncaughtTypeError
UncaughtTypeError

Reputation: 8732

Alternatively, you could just as easily achieve the same intended behaviour using standard inline-block display properties and vertical-align as demonstrated in the code snippet embedded below.

An advantage to this method is that it is not subject to the same legacy browser compatibility and support limitations that flex-box is, that is to say; it'll work in IE 11.

Code Snippet Demonstration:

.liTitle {
  padding: 10px;
  background-color: #C4161A;
  color: white;
  cursor: pointer;
}

.liText {
  margin: auto;
  /* additional */
  display: inline-block;
  vertical-align: middle;
}

/* Additional */

.liTitle img {
  display: inline-block;
  vertical-align: middle;
}
<div class="liTitle">
  <img src="http://www.denizli.bel.tr/userfiles/image/icon/nobetcieczane.gif" width="24" height="24">
  <span class="liText">Some Text</span>
</div>

Upvotes: 1

Jithin Raj P R
Jithin Raj P R

Reputation: 6797

This will work for you.

I have used display:flex; to .liTitle

and also instead of width:50% i have used flex:1; for .liText and a little padding-left to proper gap between text and image.

Note: if you want to know more about flex you can refer to this link.

.liTitle {
  padding: 10px;
  background-color: #C4161A;
  color: white;
  cursor: pointer;
  display: flex;
}

.liText {
  margin: auto;
  flex: 1;
  padding-left: 10px;
}
<div class="liTitle">
  <img src="http://www.denizli.bel.tr/userfiles/image/icon/nobetcieczane.gif" width="24" height="24">
  <span class="liText">Some Text</span>
  <*emphasized text*/div>

Hope this was helpfull for you.

Upvotes: 1

VXp
VXp

Reputation: 12068

You can do it with the Flexbox:

.liTitle {
  display: flex; /* displays children inline */
  align-items: center; /* vertical alignment / centering */
  padding: 10px;
  background-color: #C4161A;
  color: white;
  cursor: pointer;
}

.liText {
  margin-left: 10px; /* modified / adjust to your needs */
  width: 50%;
}
<div class="liTitle">
  <img src="http://www.denizli.bel.tr/userfiles/image/icon/nobetcieczane.gif" width="24" height="24">
  <span class="liText">Some Text</span>
</div>

Upvotes: 1

Hira Zainab
Hira Zainab

Reputation: 101

Add this to your liTitle class

.liTitle {

    text-align: center;

}

Upvotes: -2

Related Questions