使用css垂直对齐div和跨度

请参阅jsfiddle项目here。如何水平对齐框和标签？使用css垂直对齐div和跨度

.box { 
 
    display: inline-block; 
 
    height: 20px; 
 
    width: 30px; 
 
    border: 1px solid; 
 
} 
 

 
.legend { 
 
    horizontal-align: middle; 
 
}

<div class="legend"> 
 
    <div class="box" style="background-color: red;"> 
 
    </div> 
 
    <span>Alabama</span> 
 
</div>

来源

2016-10-06 Alex W.

你的意思是垂直对齐？ – Santi

像这样对齐？ https://jsfiddle.net/Ahm7777/cckxkvov/2/ –

谢谢。你的方式也有效。 –

您可以浮动框，而不是内联显示它的。有几种不同的方法来对齐这些。

https://jsfiddle.net/cckxkvov/5/

.box { 
    float: left; 
    height: 20px; 
    width: 30px; 
    border: 1px solid; 
} 

.legend { 
    horizontal-align: middle; 
} 

span { 
    display: inline-block; 
    line-height: 20px; 
}

来源

2016-10-06 19:56:13

很好用！谢谢！ –

这不是在CSS中垂直对齐元素的好方法。你一直在为传奇设计一个线条高度，并且已经有css属性设计来完成这个（但更好）。 –

@SethWarburton我一直使用这个静态内容。虽然我同意，但有很多方法可以达到同样的结果。 –

为什么不使用Flexbox的？

如果你想垂直对齐内.legend两个项目然后只需将这些样式：

.legend { 
    display: flex; 
    align-items: center; 
}

请记住，您将需要申请前缀跨浏览器的兼容性。

来源

2016-10-06 19:56:55 Narutkowski

在.box div上设置vertical-align属性似乎是最有意义并导致最少的问题。

.box { 
 
    display: inline-block; 
 
    height: 20px; 
 
    width: 30px; 
 
    border: 1px solid; 
 
    vertical-align: middle; 
 
}

<div class="legend"> 
 
    <div class="box" style="background-color: red;"> 
 
    </div> 
 
    <span>Alabama</span> 
 
</div>

来源

2016-10-06 20:05:18 j08691

并不适合我。 –

@ AlexW.你能说一点吗？除了'top'之外，还有其他的值需要尝试。 – j08691

谢谢，是的，中间的作品好多了。 –

我假设你的意思是垂直对齐？如果您只是试图垂直对齐两个不等高的div，则显示：inline-block是最简单和最有效的方法。你几乎拥有它的代码，但浮动打破它。不要使用浮点数！

.box { 
 
    background-color: red; 
 
    border: 1px solid; 
 
    height: 20px; 
 
    width: 30px; 
 
} 
 

 
.box, 
 
.legend { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div class="box"></div> 
 
    <div class="legend">Alabama</div>

enter link description here

来源

2016-10-06 20:18:39

使用css垂直对齐div和跨度

回答

相关问题