无法对齐 HTML 和 CSS 元素

Question

我正在尝试在我的网站上对齐这两个元素。 这是我的代码：

`<span class="location">
   <span class="dedicated-box">                 
      <div class="col-xs-4 col-sm-3 col-md-1 col-lg-1 col-xl-1 dedicated-img">
          <a href=${item.link}>
             <span>
                <img src=${item.imgSrc} alt=${"Dedicated Servers in " + item.name}>
             </span>
           </a>
           <div><p class="locationOf center-block">${item.name}</p></div>
         </div>
      </span>
   </span>`

这是我的css代码：

.dedicated-img {
    border: solid 0px #000;
    padding: 10px;
    margin: 14px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    width: 200px;
    height: 90px;
    
}

.dedicated-img p {
    width: auto;
    display: inline;
    background-color: transparent;
    color: #00a63f;


}
.dedicated-img img {
    padding: 1px;
    display: block;
    max-width: 40%;
    border: solid 1px #000;
}

这是它目前的样子： Current 我想在框中对齐标志前面的文本，并用一些背景颜色填充框右侧的 50%。 赞这个New

Answer 1

.dedicated-img {
    display: flex;
    align-items: baseline;
    border: solid 0px #000;
    padding: 10px;
    margin: 14px;
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    width: 200px;
    height: 90px;
    
}

.dedicated-img p {
    width: auto;
    display: inline;
    background-color: transparent;
    color: #00a63f;


}
.dedicated-img img {
    padding: 1px;
    display: block;
    max-width: 40%;
    border: solid 1px #000;

<span class="location">
   <span class="dedicated-box">                 
      <div class="col-xs-4 col-sm-3 col-md-1 col-lg-1 col-xl-1 dedicated-img">
          <a href=${item.link}>
             <span>
                <img src=${item.imgSrc} alt=${"Dedicated Servers in " + item.name}>
             </span>
           </a>
           <div><p class="locationOf center-block">${item.name}</p></div>
         </div>
      </span>
</span>

Answer 2

试试这个并评论本节的所有风格，然后你就会很容易知道问题出在哪里..

.dedicated-img {
    display:flex;        
}