Html 垂直居中直列块div内部动态高度div
我一直在努力使一个div中心垂直 div本身包含一个svg图像,图像下面有一些文本,向右浮动并显示在内联块中。在图像的左侧,也在container div中,是一些显示标题的文本。如果标题的文本在1行之间呈现,则图像必须在中间浮动。 这意味着高度是动态的,我不会提前知道 我已经尝试了解决此问题的表格解决方案,但无法使其工作,因为我要垂直居中的div已经是display:inline块,并且无法确定如何使其在display:table中工作Html 垂直居中直列块div内部动态高度div,html,css,Html,Css,我一直在努力使一个div中心垂直 div本身包含一个svg图像,图像下面有一些文本,向右浮动并显示在内联块中。在图像的左侧,也在container div中,是一些显示标题的文本。如果标题的文本在1行之间呈现,则图像必须在中间浮动。 这意味着高度是动态的,我不会提前知道 我已经尝试了解决此问题的表格解决方案,但无法使其工作,因为我要垂直居中的div已经是display:inline块,并且无法确定如何使其在display:table中工作 .like容器{ } .像div一样{ 显示:内联块;
.like容器{
}
.像div一样{
显示:内联块;
浮动:对;
字体大小:10px;
右边距:100px;
}
.头衔{
字体大小:40px;
宽度:计算(100%-100px);
}
喜欢
这就是标题!
这可能会对您有所帮助,这里是一个最常用的居中div
div{
宽度:100px;
高度:100px;
边框:1px纯黑;
位置:绝对位置;
排名:0;
底部:0;
左:0;
右:0;
保证金:自动;
}
my div here
您可以使用Flexbox实现垂直居中。这是密码
小提琴:
HTML
<div class="like-container">
<div class="title">This is the Title!</div>
<div class="like-div">
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve">
<path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z" />
<path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z" />
</svg> <span>Like</span>
</div>
</div>
我建议使用
flexbox
+对齐项目
来居中+顺序
来控制现有标记的位置、宽度,请参阅和相关前缀
.like-container {
display: flex;
align-items: center;
}
.like-div {
font-size: 10px;
margin-right: 100px;
order: 1;
}
.title {
font-size: 40px;
flex: 1;
}
.like-container {
display: table;
width: 100%;
}
.title, .like-div {
display: table-cell;
vertical-align: middle;
}
.title {
font-size: 40px;
width: 100%;
}
.like-div {
font-size: 10px;
padding-right: 100px;
}
如果需要支持IE9,可以使用此CSS表布局,但需要调整标记,将
放在
之前
.like-container {
display: flex;
align-items: center;
}
.like-div {
font-size: 10px;
margin-right: 100px;
order: 1;
}
.title {
font-size: 40px;
flex: 1;
}
.like-container {
display: table;
width: 100%;
}
.title, .like-div {
display: table-cell;
vertical-align: middle;
}
.title {
font-size: 40px;
width: 100%;
}
.like-div {
font-size: 10px;
padding-right: 100px;
}
您可以使用
direction
和dropfloat
:(对于旧浏览器)
.like容器{
方向:rtl;
}
.像div一样{
显示:内联块;
字体大小:10px;
垂直对齐:中间对齐;
宽度:2米;
方向:ltr;
}
.头衔{
字体大小:40px;
宽度:钙(100%-0.65em);
显示:内联块;
垂直对齐:中间对齐;
方向:ltr;
}
喜欢
这就是标题!
当尺寸不固定时,即当您想使用内联块进行尺寸调整时(如问题所述),将不起作用。该解决方案的支持情况如何?它的覆盖率是多少?