CODEWITHSUNDEEP
htmlcss
user2326844
user2326844

Reputation: 321

How to show the text in the middle of the li tag?

I have a list of images in ul and li tags that I want to show their names on them, just in the middle of the li tag.

I use the absolute position for the span tag to overlay the img tag, but the texts will not appear inside the li and it causes to set "left" for each of the span tangs separately so each one of them will be adjusted in the middle of their own image. How can I fix the problem?

.div1 {
  position: absolute;
  border: 3px solid #73AD21;
}
.div_1 {
  top: 50%;
  left: 50%
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
li {
  display: inline;
}
.img_1 {
  text-align: center;
}
span.s1,
span.s2,
span.s3,
span.s4 {
  position: absolute;
  top: 50%;
  left: 10%;
}
<div class="div1 div_1">
  <div>
    <img class="img_1" src="http://placehold.it/50x50" />
  </div>
  <div>
    <ul>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s1">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s2">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s3">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s4">TEXT</span>
      </li>
    </ul>
  </div>
</div>

Upvotes: 0

Views: 1625

Answers (5)

Amessihel
Amessihel

Reputation: 6394

I edited some part of your css.

The main changes concern LI element.

li {
  display: inline-block;
  position:relative;
}

LI have both to behave like block and inline elements (though you can use float property instead). position is set to relative so absolute-positionned elements inside will be positionned relatively to their parents.

About span elements :

span.s1,
span.s2,
span.s3,
span.s4 {
  position: absolute;
  bottom: 45%;
  left: 0%;
  width:100%;
}

bottom set to 45% will place them slightly above the vertical middle. left set to 0% and width to 100% is meant to place the text in the middle (not sure if it works this way on all browsers.

Moreover, I think that this piece of code could be improved to avoid these tricks.

.div1 {
  position: absolute;
  border: 3px solid #73AD21;
}
.div_1 {
  top: 50%;
  left: 50%
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
li {
  display: inline-block;
  position:relative;
}
span.s1,
span.s2,
span.s3,
span.s4 {
  position: absolute;
  bottom: 45%;
  left: 0%;
  width:100%;
}
<div class="div1 div_1">
  <div>
    <img class="img_1" src="http://placehold.it/50x50" />
  </div>
  <div>
    <ul>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s1">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s2">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s3">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s4">TEXT</span>
      </li>
    </ul>
  </div>
</div>

Upvotes: 2

Fayaz
Fayaz

Reputation: 43

Kindly see below updated code:

.div1 {
  position: absolute;
  border: 3px solid #73AD21;
}
.div_1 {
  top: 50%;
  left: 50%
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
li {
    position: relative;
  display: inline-block;
}
.img_1 {
  text-align: center;
}
span.s1,
span.s2,
span.s3,
span.s4 {
  position: absolute;
  z-index: 1;
  left: 0px;
  top: 35%;
  width: 100%;
}

This will make your code in centre as desired

Upvotes: 2

sideroxylon
sideroxylon

Reputation: 4416

You can wrap each element inside a <li> in a <div style = "position:relative">

.div1 {
  position: absolute;
  border: 3px solid #73AD21;
}
.div_1 {
  top: 50%;
  left: 50%
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline-block;
}
.img_1 {
  text-align: center;
}
span.s1,
span.s2,
span.s3,
span.s4 {
  position: absolute;
  top: 50%;
  left: 10%;
}
<div class="div1 div_1">
  <div>
    <img class="img_1" src="http://placehold.it/50x50" />
  </div>
  <div>
    <ul>
      <li>
        <div style="position:relative">
          <img src="http://placehold.it/50x50" /><span class="s1">TEXT</span>
        </div>
      </li>
      <li>
        <div style="position:relative">
          <img src="http://placehold.it/50x50" /><span class="s2">TEXT</span>
        </div>
      </li>
      <li>
        <div style="position:relative">
          <img src="http://placehold.it/50x50" /><span class="s3">TEXT</span>
        </div>
      </li>
      <li>
        <div style="position:relative">
          <img src="http://placehold.it/50x50" /><span class="s4">TEXT</span>
        </div>
      </li>
    </ul>
  </div>
</div>

Upvotes: 1

ketan
ketan

Reputation: 19341

Give following css.

Use position: relative; to li and give display:inline-block instead of display:inline.

And give transform: translate(0px, -50%); to span to make it proper center.

.div1 {
  position: absolute;
  border: 3px solid #73AD21;
}
.div_1 {
  top: 50%;
  left: 50%
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
li {
  display: inline-block;
  position: relative;
}
.img_1 {
  text-align: center;
}
span.s1,
span.s2,
span.s3,
span.s4 {
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(0px, -50%);
}
<div class="div1 div_1">
  <div>
    <img class="img_1" src="http://placehold.it/50x50" />
  </div>
  <div>
    <ul>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s1">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s2">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s3">TEXT</span>
      </li>
      <li>
        <img src="http://placehold.it/50x50" /><span class="s4">TEXT</span>
      </li>
    </ul>
  </div>
</div>

Upvotes: 2

tohood87
tohood87

Reputation: 728

I did the following:

li {
  position:relative;
}

When using absolute position its important to use relative position on the parent to contain it correctly.

I found a good article here as well for you:

Upvotes: 2

Related Questions