如何使用CSS垂直对齐div的内部元素？

-2

HTML

<div class="d1"> 
    <div class="d2"></div> 
    <span>Hello how r u doing,</span> 
    <span>Ismail?</span> 
</div>

输出应该是这样：

d2在顶部，和<span>文本应是d2下面：

d2 
Hello how r u doing, 
Ismail?

注意：我不能将绝对位置用于我的任何d1内部元素。

2017-05-03 Mr. Nobody

只是改变span tag的display到display:block得到以下的输出，作为spandefault display是inline。当.d2是一个块元素，因此这个元素一个接一个地对齐。

span{ 
    color:white; 
    display:block;/*Add this*/ 
}

2017-05-03 11:32:41 frnt

好是工作，但现在有LS：如果你添加像'跨度有点问题：悬停{下边框：1px的白色固体;'底部边框宽度为100％的父元素，具有看看这个：https://jsfiddle.net/wgt8zg7t/3/但我需要它是文本本身的大小 –

@ Mr.Nobody检查这个https://jsfiddle.net/wgt8zg7t/5/ – frnt

我对不起，我迟到的回复，新的例子，你给了你使用跨度宽度的明确宽度，在我的情况下，文本随机出现，我需要跟上任何JavaScript代码为了跟随它或有没有任何纯CSS可能有帮助？ –

-1

span { 
    color: white; 
    display: block; 
}

2017-05-03 11:33:52

只需添加一个display:block你的CSS

2017-05-03 11:35:25 OhmnioX

使用display:block造型在<span>元素，你可以得到你想要的结果。

2017-05-03 11:38:17 Ashish

位置：block？ CSS中没有这样的东西。 position属性具有绝对值，固定值，相对值，静态值，初始值，继承值。 –

对不起，这将是显示：块 – Ashish

进行编辑至少！ – DeeJay

改变你的跨度的CSS。添加显示块。见下文。

span { 
    color:white; 
    display:block; 
}

2017-05-03 11:47:40 ludy812

回答