如何在内联UL中垂直对齐SVG和跨度？(How do I vertically align an SVG and span in an inline UL?)

编程入门行业动态更新时间:2024-10-18 14:17:58

我在<ul>中有2个<li>项，用display: inline-block样式。

但是，每个<li>内的SVG和文本不会垂直排列。我尝试过使用vertically-align: middle因为它们是inline-block元素，但是没有用。

理想情况下，两个元素的中间将对齐，但对齐顶部或底部也可以。

svg {
  height: 20px;
  width: 20px;
  display: inline-block;
  background: green;
}

span {
  background: blue;
}

#retweet-icon, #favorite-icon {
  display: inline-block;
}

li.tweet-action {
  height: 22px;
  margin-left: 14px;
  display: inline-block;
  vertical-align: middle;
}

li.tweet-action:first-of-type {
  margin-left: 0px;
}

ul#tweet-actions {
  display: inline-block;
  list-style-type: none;
  float: left;
  padding: 0px;
  vertical-align: middle;
} 
  <ul id="tweet-actions">
  <li class="tweet-action">
    <div id="favorite-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 72">
        <path d="M38.723,12c-7.187,0-11.16,7.306-11.723,8.131C26.437,19.306,22.504,12,15.277,12C8.791,12,3.533,18.163,3.533,24.647 C3.533,39.964,21.891,55.907,27,56c5.109-0.093,23.467-16.036,23.467-31.353C50.467,18.163,45.209,12,38.723,12z"></path>
      </svg>
    </div>
    <span id="favorite-count">12</span>
  </li>
  <li class="tweet-action">
    <div id="retweet-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 72">
        <path d="M70.676 36.644C70.166 35.636 69.13 35 68 35h-7V19c0-2.21-1.79-4-4-4H34c-2.21 0-4 1.79-4 4s1.79 4 4 4h18c.552 0 .998.446 1 .998V35h-7c-1.13 0-2.165.636-2.676 1.644-.51 1.01-.412 2.22.257 3.13l11 15C55.148 55.545 56.046 56 57 56s1.855-.455 2.42-1.226l11-15c.668-.912.767-2.122.256-3.13zM40 48H22c-.54 0-.97-.427-.992-.96L21 36h7c1.13 0 2.166-.636 2.677-1.644.51-1.01.412-2.22-.257-3.13l-11-15C18.854 15.455 17.956 15 17 15s-1.854.455-2.42 1.226l-11 15c-.667.912-.767 2.122-.255 3.13C3.835 35.365 4.87 36 6 36h7l.012 16.003c.002 2.208 1.792 3.997 4 3.997h22.99c2.208 0 4-1.79 4-4s-1.792-4-4-4z" ></path>
      </svg>
    </div>
    <span id="retweet-count">15</span>
  </li>
</ul> 
  
 
I have 2 <li> items inside an <ul> that is styled with display: inline-block.  
However, the SVG and the text inside each <li> do not line up vertically. I have tried using vertically-align: middle since they are inline-block elements but that did not work.  
Ideally, the middle of the two elements would be aligned, but aligning either top or bottom would work as well.  
 
 
  
  svg {
  height: 20px;
  width: 20px;
  display: inline-block;
  background: green;
}

span {
  background: blue;
}

#retweet-icon, #favorite-icon {
  display: inline-block;
}

li.tweet-action {
  height: 22px;
  margin-left: 14px;
  display: inline-block;
  vertical-align: middle;
}

li.tweet-action:first-of-type {
  margin-left: 0px;
}

ul#tweet-actions {
  display: inline-block;
  list-style-type: none;
  float: left;
  padding: 0px;
  vertical-align: middle;
} 
  <ul id="tweet-actions">
  <li class="tweet-action">
    <div id="favorite-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 72">
        <path d="M38.723,12c-7.187,0-11.16,7.306-11.723,8.131C26.437,19.306,22.504,12,15.277,12C8.791,12,3.533,18.163,3.533,24.647 C3.533,39.964,21.891,55.907,27,56c5.109-0.093,23.467-16.036,23.467-31.353C50.467,18.163,45.209,12,38.723,12z"></path>
      </svg>
    </div>
    <span id="favorite-count">12</span>
  </li>
  <li class="tweet-action">
    <div id="retweet-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 72">
        <path d="M70.676 36.644C70.166 35.636 69.13 35 68 35h-7V19c0-2.21-1.79-4-4-4H34c-2.21 0-4 1.79-4 4s1.79 4 4 4h18c.552 0 .998.446 1 .998V35h-7c-1.13 0-2.165.636-2.676 1.644-.51 1.01-.412 2.22.257 3.13l11 15C55.148 55.545 56.046 56 57 56s1.855-.455 2.42-1.226l11-15c.668-.912.767-2.122.256-3.13zM40 48H22c-.54 0-.97-.427-.992-.96L21 36h7c1.13 0 2.166-.636 2.677-1.644.51-1.01.412-2.22-.257-3.13l-11-15C18.854 15.455 17.956 15 17 15s-1.854.455-2.42 1.226l-11 15c-.667.912-.767 2.122-.255 3.13C3.835 35.365 4.87 36 6 36h7l.012 16.003c.002 2.208 1.792 3.997 4 3.997h22.99c2.208 0 4-1.79 4-4s-1.792-4-4-4z" ></path>
      </svg>
    </div>
    <span id="retweet-count">15</span>
  </li>
</ul> 
  
 

                最满意答案
                
                    
                         set vertical-align:top div / span inside li因为默认情况下inline-block是vertical-align:baseline  
 我调整了你的代码。  
 
 
  
  #tweet-actions {
  list-style-type: none;
  float: left;
  padding: 0
}
svg {
  height: 20px;
  width: 20px;
  background: green
}
span {
  background: blue
}
div,
span {
  display: inline-block;
  vertical-align: top
}
li {
  display: inline-block;
  height: 22px;
  margin-left: 14px
}
li:first-of-type {
  margin-left: 0
} 
  <ul id="tweet-actions">
  <li class="tweet-action">
    <div id="favorite-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 72">
        <path d="M38.723,12c-7.187,0-11.16,7.306-11.723,8.131C26.437,19.306,22.504,12,15.277,12C8.791,12,3.533,18.163,3.533,24.647 C3.533,39.964,21.891,55.907,27,56c5.109-0.093,23.467-16.036,23.467-31.353C50.467,18.163,45.209,12,38.723,12z"></path>
      </svg>
    </div>
    <span id="favorite-count">12</span>
  </li>
  <li class="tweet-action">
    <div id="retweet-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 72">
        <path d="M70.676 36.644C70.166 35.636 69.13 35 68 35h-7V19c0-2.21-1.79-4-4-4H34c-2.21 0-4 1.79-4 4s1.79 4 4 4h18c.552 0 .998.446 1 .998V35h-7c-1.13 0-2.165.636-2.676 1.644-.51 1.01-.412 2.22.257 3.13l11 15C55.148 55.545 56.046 56 57 56s1.855-.455 2.42-1.226l11-15c.668-.912.767-2.122.256-3.13zM40 48H22c-.54 0-.97-.427-.992-.96L21 36h7c1.13 0 2.166-.636 2.677-1.644.51-1.01.412-2.22-.257-3.13l-11-15C18.854 15.455 17.956 15 17 15s-1.854.455-2.42 1.226l-11 15c-.667.912-.767 2.122-.255 3.13C3.835 35.365 4.87 36 6 36h7l.012 16.003c.002 2.208 1.792 3.997 4 3.997h22.99c2.208 0 4-1.79 4-4s-1.792-4-4-4z"></path>
      </svg>
    </div>
    <span id="retweet-count">15</span>
  </li>
</ul> 
  
 
set vertical-align:top on div/span inside li because by default inline-block is vertical-align:baseline 
I tweaked your code. 
 
 
  
  #tweet-actions {
  list-style-type: none;
  float: left;
  padding: 0
}
svg {
  height: 20px;
  width: 20px;
  background: green
}
span {
  background: blue
}
div,
span {
  display: inline-block;
  vertical-align: top
}
li {
  display: inline-block;
  height: 22px;
  margin-left: 14px
}
li:first-of-type {
  margin-left: 0
} 
  <ul id="tweet-actions">
  <li class="tweet-action">
    <div id="favorite-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 72">
        <path d="M38.723,12c-7.187,0-11.16,7.306-11.723,8.131C26.437,19.306,22.504,12,15.277,12C8.791,12,3.533,18.163,3.533,24.647 C3.533,39.964,21.891,55.907,27,56c5.109-0.093,23.467-16.036,23.467-31.353C50.467,18.163,45.209,12,38.723,12z"></path>
      </svg>
    </div>
    <span id="favorite-count">12</span>
  </li>
  <li class="tweet-action">
    <div id="retweet-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 75 72">
        <path d="M70.676 36.644C70.166 35.636 69.13 35 68 35h-7V19c0-2.21-1.79-4-4-4H34c-2.21 0-4 1.79-4 4s1.79 4 4 4h18c.552 0 .998.446 1 .998V35h-7c-1.13 0-2.165.636-2.676 1.644-.51 1.01-.412 2.22.257 3.13l11 15C55.148 55.545 56.046 56 57 56s1.855-.455 2.42-1.226l11-15c.668-.912.767-2.122.256-3.13zM40 48H22c-.54 0-.97-.427-.992-.96L21 36h7c1.13 0 2.166-.636 2.677-1.644.51-1.01.412-2.22-.257-3.13l-11-15C18.854 15.455 17.956 15 17 15s-1.854.455-2.42 1.226l-11 15c-.667.912-.767 2.122-.255 3.13C3.835 35.365 4.87 36 6 36h7l.012 16.003c.002 2.208 1.792 3.997 4 3.997h22.99c2.208 0 4-1.79 4-4s-1.792-4-4-4z"></path>
      </svg>
    </div>
    <span id="retweet-count">15</span>
  </li>
</ul>