如何在Div内正确渲染文本？

Question

在下面的例子中，你可以看到'c'和'x'从div出来，如何正确地放置在div中？

.d { 
 
    padding-left: 20px; 
 
    border-left-width: 2px solid; 
 
    border-left-style: solid; 
 
    border-left-color: rgb(255, 0, 0); 
 
    border-top-width: 2px solid; 
 
    border-top-style: solid; 
 
    border-top-color: rgb(255, 0, 0); 
 
    border-bottom-width: 2px solid; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: rgb(255, 0, 0); 
 
    display: inline-block; 
 
    height: 30px; 
 
    position: relative; 
 
    background-color: 'white'; 
 
} 
 
.controllContainer { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.controls { 
 
    border: 1px solid; 
 
    width: 10px; 
 
    height: 10px; 
 
    margin: 3px; 
 
}

<div class="d " style=""> 
 
    test text 
 
    <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round"> 
 

 
    </polyline> 
 
    </svg> 
 
    <div class="controllContainer"> 
 
    <div class="controls">c</div> 
 
    <div class="controls">x</div> 
 
    </div> 
 
</div>

Answer 1

将line-height加到.controls。

.d { 
 
    padding-left: 20px; 
 
    border-left-width: 2px solid; 
 
    border-left-style: solid; 
 
    border-left-color: rgb(255, 0, 0); 
 
    border-top-width: 2px solid; 
 
    border-top-style: solid; 
 
    border-top-color: rgb(255, 0, 0); 
 
    border-bottom-width: 2px solid; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: rgb(255, 0, 0); 
 
    display: inline-block; 
 
    height: 30px; 
 
    position: relative; 
 
    background-color: 'white'; 
 
} 
 
.controllContainer { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.controls { 
 
    border: 1px solid; 
 
    width: 10px; 
 
    height: 10px; 
 
    margin: 3px; 
 
    line-height: 9px; /* added here */ 
 
}

<div class="d " style=""> 
 
    test text 
 
    <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round"> 
 

 
    </polyline> 
 
    </svg> 
 
    <div class="controllContainer"> 
 
    <div class="controls">c</div> 
 
    <div class="controls">x</div> 
 
    </div> 
 
</div>

Answer 2

我猜这是什么做line-height，所以加line-height: 0.3到.controls：

.d { 
 
    padding-left: 20px; 
 
    border-left-width: 2px solid; 
 
    border-left-style: solid; 
 
    border-left-color: rgb(255, 0, 0); 
 
    border-top-width: 2px solid; 
 
    border-top-style: solid; 
 
    border-top-color: rgb(255, 0, 0); 
 
    border-bottom-width: 2px solid; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: rgb(255, 0, 0); 
 
    display: inline-block; 
 
    height: 30px; 
 
    position: relative; 
 
    background-color: 'white'; 
 
} 
 
.controllContainer { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.controls { 
 
    border: 1px solid; 
 
    width: 10px; 
 
    height: 10px; 
 
    margin: 3px; 
 
    line-height: 0.3; 
 
}

<div class="d " style=""> 
 
    test text 
 
    <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round"> 
 

 
    </polyline> 
 
    </svg> 
 
    <div class="controllContainer"> 
 
    <div class="controls">c</div> 
 
    <div class="controls">x</div> 
 
    </div> 
 
</div>

预览

你可能需要调整一点点地得到它的权利。因为它可以在Firefox中正常工作，并在Chrome中显示上图。

Answer 3

的line-height =区域的高度将工作以及..

.d { 
 
    padding-left: 20px; 
 
    border-left-width: 2px solid; 
 
    border-left-style: solid; 
 
    border-left-color: rgb(255, 0, 0); 
 
    border-top-width: 2px solid; 
 
    border-top-style: solid; 
 
    border-top-color: rgb(255, 0, 0); 
 
    border-bottom-width: 2px solid; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: rgb(255, 0, 0); 
 
    display: inline-block; 
 
    height: 30px; 
 
    position: relative; 
 
    background-color: 'white'; 
 
} 
 
.controllContainer { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.controls { 
 
    border: 1px solid; 
 
    width: 10px; 
 
    line-height: 10px; 
 
    height: 10px; 
 
    margin: 3px; 
 
}

<div class="d " style=""> 
 
    test text 
 
    <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round"> 
 

 
    </polyline> 
 
    </svg> 
 
    <div class="controllContainer"> 
 
    <div class="controls">c</div> 
 
    <div class="controls">x</div> 
 
    </div> 
 
</div>

Answer 4

Line-height和text-align作品完美的罚款。由于文本没有任何标签内定义的，我们有使用线高度对齐，

.d { 
 
    padding-left: 20px; 
 
    border-left-width: 2px solid; 
 
    border-left-style: solid; 
 
    border-left-color: rgb(255, 0, 0); 
 
    border-top-width: 2px solid; 
 
    border-top-style: solid; 
 
    border-top-color: rgb(255, 0, 0); 
 
    border-bottom-width: 2px solid; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: rgb(255, 0, 0); 
 
    display: inline-block; 
 
    height: 30px; 
 
    position: relative; 
 
    background-color: 'white'; 
 
} 
 
.controllContainer { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
.controls { 
 
    border: 1px solid; 
 
    width: 10px; 
 
    height: 10px; 
 
    margin: 3px; 
 
    line-height:7px;/*Add this*/ 
 
    text-align:center;/*Add this*/ 
 
}

<div class="d " style=""> 
 
    test text 
 
    <svg style="pointer-events: none;position: absolute;top: -2px;left: 70px;" width="40" height="34" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <polyline style="pointer-events:all;fill:white;stroke:#FF0000;stroke-width:2" points="0,0 40,17 , 0,34" stroke-linecap="round"> 
 

 
    </polyline> 
 
    </svg> 
 
    <div class="controllContainer"> 
 
    <div class="controls">c</div> 
 
    <div class="controls">x</div> 
 
    </div> 
 
</div>