Html CSS垂直对齐图像和块引号以及自动宽度块引号
我有一个项目列表,其中包括一个图像和块报价。我一直在尝试将图像宽度设置为设置的最大宽度。然后尝试使blockquote自动适合图像端。同时保持两个元素也垂直对准中心 我遇到了一些问题,如果有人能帮助我,我将不胜感激 htmlHtml CSS垂直对齐图像和块引号以及自动宽度块引号,html,css,Html,Css,我有一个项目列表,其中包括一个图像和块报价。我一直在尝试将图像宽度设置为设置的最大宽度。然后尝试使blockquote自动适合图像端。同时保持两个元素也垂直对准中心 我遇到了一些问题,如果有人能帮助我,我将不胜感激 html <ul> <li> <div><img src="http://placehold.it/180x100"></div> <blockquote><p>Lorem i
<ul>
<li>
<div><img src="http://placehold.it/180x100"></div>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
</li>
<li>
<div><img src="http://placehold.it/146x16"></div>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec magna elit. Suspendisse nec enim lacus. Aenean semper ipsum in faucibus blandit. Duis auctor ornare viverra. – Person</p></blockquote>
</li>
</ul>
我已经删除了
float
,以便它可以正确地垂直对齐。请勾选此项如果您可以选择使用flexbox,请查看
更新了提琴,因为我对你要求的宽度方面读得太多了
如果您想了解更多关于这一令人敬畏的技术:
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
width: 100%;
position: relative;
float: left;
padding: 0 0 30px;
}
ul li div {
width: 200px;
position: relative;
float: left;
height: 100%;
max-height: 100%;
display:table-cell;
vertical-align: middle;
}
ul li img {
display:table-cell;
vertical-align: middle;
}
ul li blockquote {
color: #999;
float: right;
font-style: italic;
margin: 0;
width: 70%;
}
ul li blockquote p {
margin: 10px 0;
}