无法对齐HTML和CSS元素
无法对齐HTML和CSS元素
提问于 2020-07-09 16:50:08
我正试图在我的网站上对齐这两个元素。这是我的代码：
`<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;
}
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-07-09 18:15:01
.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>
Stack Overflow用户
发布于 2020-07-09 17:35:37
试着这样做，并评论这部分的所有风格，然后你就会很容易地发现问题出在哪里。
.dedicated-img {
display:flex;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62810987
复制相关文章
相似问题
腾讯云开发者
