CODEWITHSUNDEEP
htmlcss
user7582130
user7582130

Reputation:

Vertical align links next to an image object

Having a little trouble here.

I am trying to get the text to be in the middle of the image. I tried to vertically align but it did not work ?

For example:

enter image description here

li {
  display: inline;
  width: 30px;
  vertical-align: middle;
}

a {
  color: #333;
  margin-top: 1em;
  margin-bottom: auto;
  text-align: center;
}

a:hover {
  color: red;
}
<div class="row">
  <ul class="menu">
    <object type="image/svg+xml" data="https://www.pets4homes.co.uk/images/articles/2184/large/tortoise-and-turtle-shells-and-potential-problems-5437997a9781f.jpg" width="100px" height="75px"></object>
    <li><a href="#">but1</a></li>
    <li><a href="#">but2</a></li>
    <li><a href="#">but3</a></li>
    <li><a href="#">but4</a></li>
  </ul>
</div>

JSFiddle:

https://jsfiddle.net/n40qdv8n/

Upvotes: 0

Views: 226

Answers (5)

Ram kumar
Ram kumar

Reputation: 3162

Your markup is wrong. We need to put li inside of direct ul but you use object so i have changed little bit 

li{
   display: inline-block;
   vertical-align: middle;
   }
   object {
     margin: 0;
     padding: 0;
   }
a {
  color: #333;
  text-align: center;
  
}

a:hover {
  color: red;
}
<div class="row">
        <ul class="menu">
          <li><object type="image/svg+xml" data="https://www.pets4homes.co.uk/images/articles/2184/large/tortoise-and-turtle-shells-and-potential-problems-5437997a9781f.jpg" width="100px" height="75px"></object></li>
          <li><a href="#">but1</a></li>
          <li><a href="#">but2</a></li>
          <li><a href="#">but3</a></li>
          <li><a href="#">but4</a></li>
        </ul>
      </div>

Upvotes: 0

Stickers
Stickers

Reputation: 78796

There are a couple of things to fix:

  • The markup is invalid <object> can't be directly under <ul>, please wrap it into a <li> tag.

  • You should use display: inline-block rather than inline, so the width could work, and I suggest to use min-width in this case.

li {
  display: inline-block;
  min-width: 30px;
  vertical-align: middle;
  outline: 1px solid aqua;
}

a {
  color: #333;
  margin-top: 1em;
  margin-bottom: auto;
  text-align: center;
}

a:hover {
  color: red;
}
<div class="row">
  <ul class="menu">
    <li>
      <object type="image/svg+xml" data="https://www.pets4homes.co.uk/images/articles/2184/large/tortoise-and-turtle-shells-and-potential-problems-5437997a9781f.jpg" width="100px" height="75px"></object>
    </li>
    <li><a href="#">but1</a></li>
    <li><a href="#">but2</a></li>
    <li><a href="#">but3</a></li>
    <li><a href="#">but4</a></li>
  </ul>
</div>

Upvotes: 1

Johannes
Johannes

Reputation: 67799

Make both li and your object have display: inline-block; and vertical-align: middle;:

li {
  display: inline-block;
  width: 30px;
  vertical-align: middle;
}
object {
  display: inline-block;
  vertical-align: middle;
}
a {
  color: #333;
  margin-top: 1em;
  margin-bottom: auto;
  text-align: center;
}

a:hover {
  color: red;
}
<div class="row">
  <ul class="menu">
    <object type="image/svg+xml" data="https://www.pets4homes.co.uk/images/articles/2184/large/tortoise-and-turtle-shells-and-potential-problems-5437997a9781f.jpg" width="100px" height="75px"></object>
    <li><a href="#">but1</a></li>
    <li><a href="#">but2</a></li>
    <li><a href="#">but3</a></li>
    <li><a href="#">but4</a></li>
  </ul>
</div>

Upvotes: 0

ByteSettlement
ByteSettlement

Reputation: 208

Use the vertical align on the image not the text https://jsfiddle.net/qb1xjt3u/

HTML:

<body>
  <div class="row">
        <ul class="menu">
          <object type="image/svg+xml" data="https://www.pets4homes.co.uk/images/articles/2184/large/tortoise-and-turtle-shells-and-potential-problems-5437997a9781f.jpg" width="100px" height="75px"></object>
          <li><a href="#">but1</a></li>
          <li><a href="#">but2</a></li>
          <li><a href="#">but3</a></li>
          <li><a href="#">but4</a></li>
        </ul>
      </div>
    </div>
</body>

CSS

li{
   display: inline;
   width: 30px;
   }
a {
  color: #333;
  margin-top: 1em;
  margin-bottom: auto;
  text-align: center;

}

a:hover {
  color: red;
}

object { vertical-align: middle; }

Upvotes: 0

radiantstatic
radiantstatic

Reputation: 342

Many ways to skin a cat, but you could use flexbox on the parent UL and use the "align-items: center;" to get the effect you are looking for.

https://jsfiddle.net/radiantstatic/3ajjsdLc/

ul{
  display: flex;
  align-items: center;
}
li{
   display: inline;
   width: 30px;
   vertical-align: middle;
   }
a {
  color: #333;
  margin-top: 1em;
  margin-bottom: auto;
  text-align: center;
  
}

a:hover {
  color: red;
}
<body>
  <div class="row">
        <ul class="menu">
          <object type="image/svg+xml" data="https://www.pets4homes.co.uk/images/articles/2184/large/tortoise-and-turtle-shells-and-potential-problems-5437997a9781f.jpg" width="100px" height="75px"></object>
          <li><a href="#">but1</a></li>
          <li><a href="#">but2</a></li>
          <li><a href="#">but3</a></li>
          <li><a href="#">but4</a></li>
        </ul>
      </div>
    </div>
</body>

See more about flexbox here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Upvotes: 0

Related Questions